Shubham Goyal Shubham Goyal - 4 days ago 5
CSS Question

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?

Answer

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>

Comments