子图像和div高度相同

我有一个部分，里面有一个固定高度的图像和一个div，里面有一些文本和背景色。我想要使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响应以便在调整它的大小缩小，并与它一起股利。我怎样才能做到这一点？

来源

2016-11-29 Shubham Goyal

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>

来源

2016-11-29 05:51:06

我需要在侧部和DIV来对图像的顶部，不应该是100％。 –

@ShubhamGoyal我已经更新了我的答案，请检查一次 –

非常感谢@Abhishek Pandey。现在工作很好 –

请让您的解决方案的链接
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; 
}

来源

2016-11-29 05:58:57

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>

来源

2016-11-29 06:14:36

子图像和div高度相同

回答

相关问题