Child Image and div of same height - html

Question

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 1

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>

Answer 2

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

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>