html - 相对 div-Container 应具有其中绝对 img 的高度

Question

<div id="mainPic" style="width:50%;">
    <img id="pic1" src="#" width="100%">
    <img id="pic2" src="#" width="100%">
</div>

我在 div#mainPic 中有两个图像，其父级宽度为 50%。图像将使用全宽，不多不少，并自动调整高度。mainPic 现在应该与图像具有相同的高度。问题是我必须将图像设置为绝对图像，因为我想要一个在另一个之上。所以两者都有规则:

position : absolute;
top : 0px;
left : 0px;

但是现在 div#mainPic 不是动态地具有来自自动缩放图像的高度。Javascript 也出局了，因为 JS 只设置一次高度，而不是每次调整窗口大小时。

Answer 1

绝对定位设置元素相对于第一个非静态父元素的位置。您可能还没有设置 #mainPic 的位置，它将其默认值设置为静态。这意味着如果您将子元素 #pic1 和 #pic2 的位置更改为绝对位置，那么它们将被赋予相对于 body 的绝对位置。这可以简单地通过给 #mainPic 一个非静态位置来解决。 fiddle 示例:https://jsfiddle.net/thinker3197/n4kn2wLa/