子画像と同じ高さの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>

画像は、縮小リサイズし、またそれに伴ってDIVようにIMG応答のブートストラップ・クラスを有しています。これどうやってするの？

Answer 1

positionプロパティは、必要に応じて同じになります。 sectionがimgの高さを取るとdivにheight:100%;とposition:absoluteを設定することにより、それが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>