html - 相同高度的子图像和div

Question

我有一个部分，里面有一个固定高度的图像和一个包含一些文本和背景颜色的 div。我想使 div 和图像的高度相同，并使具有背景颜色的 div 与图像重叠，以便只看到文本和背景颜色，而不是图像，但高度应该是图像的高度。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
  <img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
  <div style="background-color:blue">
    <h2>ABCD</h2>
  </div>
</section>

图像有一个 img-responsive Bootstrap 类，因此在调整大小时它会缩小，div 也会随之缩小。我该怎么做？

Answer 1

position 属性将按您希望的方式工作。 section 将采用 img 的高度，并将 height:100%; 和 position:absolute 设置为 div，它的高度与 img

相同

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section {
  position: relative;
}
div {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
}
</style>
<section>
  <img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
  <div style="background-color:blue">
    <h2>ABCD</h2>
  </div>
</section>