相同高度的子图像和 div答案

【问题标题】：Child Image and div of same height相同高度的子图像和 div
【发布时间】：2017-04-13 00:25:56
【问题描述】：

我有一个部分，其中有一个固定高度的图像和一个 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 的引导类，因此在调整大小时它会缩小，并且 div 也会随之缩小。我该怎么做？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

我需要 div 位于图像顶部而不是侧面，并且应该是 100%。
非常感谢@Abhishek Pandey。现在工作正常

【解决方案2】：

请提供您的解决方案的链接
http://codepen.io/santoshkhalse/pen/pNWpYd

<section>
      <img class="img-height" src = "https://openclipart.org/image/2400px/svg_to_png/28688/skotan-Thumbs-up-smiley.png" class = "img-responsive">
      <div class="content-text">
            <h2> Your text will render here </h2>
      </div>
</section>


.img-height{
  height:100px;
  position:absolute;

}

.content-text{
  width:100%;
  height:100px;
  background:green;
  padding-left:120px;
}

【讨论】：

【解决方案3】：

img{ display:block; max-width:100%; height:auto;}
section{ position:relative}
.overlap-text{background:rgba(0,0,0, 0.5); color:#fff; position:absolute; left:0; top:0; height:100%; width:100%;}

<section>
		<img src="https://s-media-cache-ak0.pinimg.com/originals/2a/94/e3/2a94e33f7afe6600fe9c97eda3a386b3.jpg" class="img-responsive"/>   
        <div class="overlap-text">
        	 <h2>Lorem Ipsum dummy text</h2>
        </div> 	
    </section>

【讨论】：