html - 相对div容器内部应具有绝对img的高度

<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仅一次设置高度，而不是每次您调整窗口大小时都设置一次。

最佳答案

绝对定位设置元素相对于第一个非静态父元素的位置。您可能尚未设置#mainPic的位置，该位置将其默认值设置为static。这意味着，如果您将子元素#pic1和#pic2的位置更改为绝对位置，则将为它们指定相对于body的绝对位置。通过给#mainPic一个非静态位置可以简单地解决这个问题。
小提琴示例：https://jsfiddle.net/thinker3197/n4kn2wLa/