Css 为什么<；img>；正确缩放，而不是<；部门>；窗口何时更改尺寸？

我在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>

---

你在那个正方形上有一个固定的像素宽度和高度-它不能那样改变大小（使用百分比）

在注释后添加了JSFIDLE：

注意：用于图像和

#square

DIV的容器现在具有

高度：66.66vw，对应于图像的高度/宽度比例（2/3）。因为图像是100%宽（这里等于100vw），这是为其容器获得正确高度设置的方法，这在使用高度百分比值时是必要的，正如我在评论中所写的。同样，我得到了suare DIV的宽度和高度的百分比值

另外，当在一个父元素中有两个绝对定位的元素时，有必要使用z索引。
这是因为您设置了固定的宽度。试试这个：

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

在img标签中使用引导类img responsible生成响应图像。
演示：
好的，伙计们。这是解决办法。感谢所有帮助我在这个非理性HTML世界中取得进步的人（特别是@SalmanA和@Johannes）

由于我需要一种多层方法，我在相对div中使用嵌入的绝对div和img

然后，当我们调整窗口大小时，我们希望正方形能够自行调整大小，因此必须使用padding top来设置初始大小：

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

我不知道这是为什么，但它是有效的：-）
您已经为正方形设置了一个明确的宽度和高度（以像素为单位）。您可以改为使用
%
进行设置。在正方形上使用顶部填充技巧来保持比例。要使
#square
响应，您可以设置
宽度：100%；最大宽度：200px@SalmanA恭喜你！你的把戏奏效了，即使这对我来说超出了逻辑：-）我将用iThanks Hybrid回答一般的问题。但是在这个场景中，方块消失了。你能制作一个JSFIDLE来显示方块的出现吗？我在我的电脑上做这件事，我看到盒子里显示的很好。由于您使用的是绝对定位，因此默认情况下高度为0。。。试试我更新的答案。好吧，宽度和高度都是从父元素的相应值计算百分比的，这对于
高度
：父元素也需要有一个高度定义才能工作。如果这个高度也是一个百分比值，那么伟大的父母同样需要一个高度定义，以此类推，直到
body
和
html
元素，这就是为什么你经常看到规则
html，body{height:100%；}
jsfiddle.net/moiamy/yjo6j7k3/1/#注意我的答案和其中的jsfiddle。主要的一点是为容器（和z索引）定义一个高度设置。是的，很抱歉，我错过了你的要点Johannes。然而，当我现在添加html时，body{height:100%；}如果我将方块宽度设置为%%，那么我就看不到任何方块。使用高度设置中的
vw
单位，高度独立于html和body height
#square1 {
   position: absolute;
   padding-top:150px;
   width: 50%;
}