子圖像和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響應以便在調整它的大小縮小，並與它一起股利。我怎樣才能做到這一點？

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>

Answer 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; 
} 

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