让div继承兄弟img的高度 - 可能吗？

Question

<div id="holder">
    <img src="blah.jpg" width="xxx" height="yyy">
    <div id="stuff">waffle</div>
</div>

其中xxx和yyy是基于所显示图像的大小在PHP中生成的.

我希望#stuff的大小相同,以完全覆盖它.CSS的重叠和宽度是微不足道的,但我不知道如何设置div的高度,而不采用内联样式.

height:100%不起作用,因为你需要在父元素上有一个显式设置的高度,我不需要.

任何选择？

Answer 1

这是绝对定位的一种方式.虽然它可能不是理想的,#holder但必须是inline-block浮动的

#holder {
    position: relative;
    display: inline-block;
}

#stuff {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    background: red;
    opacity: 0.5;
}

<div id="holder">
    <img src="http://placehold.it/400x400" width="xxx" height="yyy">
    <div id="stuff">waffle</div>
</div>