Incorrect container height based on the image inside it - css

Question

As you can see in the attached pic, the .grid-item div doesn't have the exact height of the content inside it (in my case the <img>), but it seems to add a few pixel on the bottom.
How can I tell the .grid-item div to use the exact height of the image inside it?
Ideally if it's possible I'd like to keep absolute and relative positioning of the divs like it is in the example below.
HTML structure:
<section>
<div class="grid-item">
<div class="item-content">
<div class="caption">
<!-- .... -->
</div>
<img src="http://placehold.it/700x400/" alt="" />
</div>
</div>
</section>
CSS:
*{
box-sizing:border-box;
margin:0;
}
body{
font: 16px/1.5em sans-serif;
}
img{
width:100%;
height:auto;
position:relative;
}
section{
max-width:960px;
margin:0 auto;
}
section .grid-item{
width:50%;
float:left;
padding:20px;
}
section .grid-item .item-content{
position:relative;
width:100%;
overflow:hidden;
}
section .grid-item .item-content .caption{
position:absolute;
width:100%;
height:100%;
background:#333;
transform:translateX(-50%);
z-index:2;
}
-
FULL CODE:
http://codepen.io/anon/pen/zrydZX?editors=1100

Answer 1

Add display:block to your img rule: http://codepen.io/anon/pen/qbLXxd?editors=1100
Images are by default inline allowing you to vertically align them in blocks of text. The key disadvantages are that this then results in them also being affected by line height, font size, kerning, etc.