CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shubham Goyal
Shubham Goyal

Reputation: 667

Child Image and div of same height

I have a section inside which there is an image of a fixed height and a div which has some text and a background color in it. I want to make the height of the div and the image same and the div with the background color to overlap the image so that only text and background color are seen and not the image but the height should be of the image.

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

The image has a bootstrap class of img-responsive so that on resize it shrinks and also the div along with it. How can I do this?

Upvotes: 0

Views: 1464

Answers (3)

Amit Kutty
Amit Kutty

Reputation: 1

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>

Upvotes: 0

Santosh Khalse
Santosh Khalse

Reputation: 12700

Please have a link of your solution
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;
}

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

position properties will work same as you want. section will take img's height and by setting height:100%; and position:absolute to div, it will take same height as 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>

Upvotes: 1

Related Questions