Responsive sizing and positioning of multiple images relatively to another in CSS

Question

I am trying to put some images over another one (which is a big logo), and I also want it to be responsive : when I reduce the size of the browser window, I want the images that are over the logo to stay at the same place on the logo and follow its automatic resizing.

Here is what I have in the browser for now (I want to have the images on the lines and don't move from their position even when reducing the window) : browser actual result

And here is the code I have done until now :

#frame {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

#logo-canvas {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.parent-photo {
    position: relative;
}

#child-photo1 {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    position: absolute;
    left: 1rem;
    top: 1rem;

}

#child-photo2 {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    position: absolute;
    left: 2rem;
    top: 2rem;

}

I thought that the parent/child relation with the position attribute would work, but I am stuck (maybe the flex is messing with it ?). I am still a beginner so I could really use some help !

Thank you to anyone who will help me ! :)

user_1751766 · Answer

Speaking from experience, it can be really difficult to do what you describe and have it work well for all viewports.

If you want to give it a try though, try using vw units to position and resize the child images, then they'll respond to the viewport or screen width.

To get you started, see what this looks like:

#child-photo1 {
    width: 5.5vw;
    height: 5.5vw;
    border-radius: 50%;
    position: absolute;
    left: 1.375vw;
    top: 1.375vw;

}

#child-photo2 {
    width: 5.5vw;
    height: 5.5vw;
    border-radius: 50%;
    position: absolute;
    left: 2.75vw;
    top: 2.75vw;
}

Don't be surprised if the images get too small at some mobile views, and too large on some desktop views. If this is the case you could set max-width,max-height, min-width, min-height values.

user_12483990 · Answer

영어를 잘 못해서 한글로 적어요. 원하는 이미지들을 png로 동일한 크기로 만든 후 부모 태그 역시 동일한 크기로 설정하고 position을 relative로 잡는다. 자식에 있는 해당 이미지들을 absolute, max-width:100%로 설정 한다. 마지막으로 해당 이미지들을 top, left 등등 퍼센트로 잡아 주면 된다.

(I am not good at English, so I use Google Translation. After making the desired images the same size with png, the parent tag is also set to the same size and the position is relative. Set the corresponding images in the child to absolute, max-width:100%. Finally, you can set the images as top, left, etc. percentages.)

Responsive sizing and positioning of multiple images relatively to another in CSS

2 Answers