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

Question

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

根据所显示图像的大小，在PHP中生成xxx和yyy。

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

高度：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>

Answer 2

您可以这样做，假设#holder只是图片的大小而#stuff的大小应与#holder相同：

#holder {
  position: relative;
}

#stuff {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}