使多个居中的图像响应答案

【问题标题】：Make multiple centered images responsive使多个居中的图像响应
【发布时间】：2014-02-23 01:33:51
【问题描述】：

这是我的挑战：

我有三个不同大小的圆形图像（磁盘），它们居中并相互堆叠，从大到小。我现在正试图通过保持彼此居中并以相同的比例缩小，让它们响应并缩小浏览器窗口和屏幕。这也意味着当窗口变得小于最大的图像时，所有三个图像都必须缩小。

非常感谢任何帮助。

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;
}

【问题讨论】：

改用% 或vw 设置宽度。这是假设您的 html,body 样式为 100%/vw/vh。

标签： html css responsive-design

【解决方案1】：

假设你的

html, body

设置为

height:100vh;
width:100vw;

你可以这样做（这只是一个例子！）：

<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

然后将其应用到您的divs。

它也适用于%，但有人说vw/vh 更酷，而且他们的stackoverflow 代表比我多得多，所以我将把它当作事实而不做任何研究。

【讨论】：