Question

我有一个部分，里面有一个固定高度的图像和一个div，里面有一些文字和背景颜色。我想使div的高度和图像相同，背景颜色的div与图像重叠，这样只能看到文字和背景颜色，而不是图像，但高度应该是图像。

＆＃13;

<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>

＆＃13;

该图像具有img-responsive的引导类，因此在调整大小时它会缩小，并且div也会随之缩小。我怎么能这样做？

Answer 1

position属性可以根据需要使用。 section将img的高度设置为height:100%;和position:absolute设置为div，其高度与img相同

＆＃13;

<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>

＆＃13;

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>
		<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>

儿童图像和相同高度的div

3 个答案: