Question

我在img上面有一个正方形。当我缩小窗口时，img按比例缩放，但方块根本不会改变大小？

这是html：

<div class="row">

    <div class="col-xs-10 col-sm-11 col-md-11" style="position: relative;">         
      <img src="images/mur02-1200.jpg" class="superpose" id="img1" alt="mur01" style="visibility:visible;">              
      <img src="images/mur03-1200.jpg" class="superpose" id="img2" alt="mur02" style="visibility:hidden;">
      <div id="square"></div>
    </div>
</div>

这是css：

.superpose {
  position: absolute;
  width:auto;
  height:auto;
  max-width: 100%;

}

#square {
  position: absolute;
   width: 200px;  
   height:200px;
   background-color: orange;
   opacity: 0.5;
    max-width: 100%;
}

Answer 1

你在这个方块上有一个固定的像素宽度和高度 - 它不能改变这种方式的大小（使用百分比）

评论后添加jsFiddle：http://jsfiddle.net/c3wtcp5q/3/

注意：图像的容器和#square DIV现在具有height: 66.66vw;，它对应于图像的高度/宽度比例（2/3）。由于图像是100％宽（这里等于100vw），这就是为其容器获得正确高度设置的方法，这在使用高度百分比值时是必要的，正如我在评论中写的那样。同样，我得到了suare DIV的宽度和高度的百分比值。

此外，当在一个父母中有两个绝对定位的元素时，必须使用z-index。

Answer 2

这是因为您设置了固定宽度。试试这个：

#square {
   position: absolute;
   width: 100%;
   height: 200px;
   background-color: orange;
   opacity: 0.5;
   max-width: 200px;
}

Answer 3

在img标签中使用bootstrap class img-responsive来制作响应式图像。对于演示：https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

Answer 4

好的伙计们。这是解决方案。感谢所有帮助我推进这个非理性HTML世界的人（特别是@SalmanA和@Johannes）

由于我想要多层方法，我使用嵌入式绝对 div ＆amp; 亲戚 div 中的 img 。

然后我们希望广场在调整窗口大小时自行调整大小，我们必须使用padding-top来设置初始大小：

#square1 {
   position: absolute;
   padding-top:150px;
   width: 50%;
}

我不知道为什么会这样，但它有效： - ）

为什么<img/>在窗口改变尺寸时正确缩放而不是<div>？

4 个答案: