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提供非静态位置来简单地解决。示例小提琴：https://jsfiddle.net/thinker3197/n4kn2wLa/

相对div-Container应该具有绝对img的高度

1 个答案: