Question

这是我的挑战：

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

非常感谢任何帮助。

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

Answer 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

然后将其应用到您的div。

它也可以与%一起使用，但是有人说vw / vh更酷了，他们的堆栈溢出代表比我更多，所以我将把它作为事实没有做任何研究。

使多个居中的图像响应

1 个答案: