Make multiple centered images responsive

Question

Here is my challenge:

I have three different sized round images (disks) that are centered within and stacked on top of each other, largest to smallest. I am now trying to have them be responsive and shrink with smaller browser windows as well as screens by staying centered within each other and shrink with the same ratio. That also means that all three images have to shrink when the window gets smaller than the largest image.

Any help is highly appreciated.

HTML:

<div><a href=".../url1/"><img class="round1" alt="" src=".../roundimage1.png"/></a></div>
<div><a href=".../url2/"><img class="round2" alt="" src=".../roundimage2.png"/></a></div>
<div><a href=".../url3/"><img class="round3" alt="" src=".../roundimage3.png"/></a></div>

CSS:

 .round1 {
    float: left;
    z-index: 1;
    position: absolute;
    max-width: 1000px;
    height: auto;
    top: 150px;
    left: 150px; 
}
.round2 {
        float: left;
        z-index: 2;
        position: absolute;
        max-width: 800px;
        height: auto;
        top: 250px;
        left: 250px;
}
.round3 {
        float: left;
        z-index: 3;
        position: absolute;
        max-width: 600px;
        height: auto;
        top: 350px;
        left: 350px;
}

Set widths using % or vw instead. This is assuming your html,body styles are 100%/vw/vh. — Albzi

Albzi Albzi · Accepted Answer · 2014-01-30T16:29:20

Assuming your

html, body

is set to

height:100vh;
width:100vw;

You could do something like this (This is just an example!):

<div></div>
<div class="div_one"></div>
<div class="div_two"></div>

html,body{
  height:100vh;
  width:100vw;
  padding:0;
  margin:0;
}
div{
  background:#b4d455;
  position:relative;
  height:50vh;
  width:50vw;
}

.div_one{
  background:red;
  margin-top:-20vh;
  margin-left:10vw;
}

.div_two{
  background:blue;
  margin-top:-30vh;
  margin-left:40vw;
}

Codepen

Then just apply it to your divs.

It will work with % too, but someone said vw/vh were cooler and they had way more stackoverflow rep than me, so I'm going to take that as fact without doing any research.

Make multiple centered images responsive

1 Answers