JSFiddle - React, Tailwind, and code Playground

HTML

This image has the same height as the div:

<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

<p>&nbsp;</p>

This one's height is a few pixels less than the div's height:

<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=20 />
</div>

CSS

.frame {
    height: 25px;      /* image height */
    line-height: auto;
    width: 160px;      /* image width */
    border: 1px solid red;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display:table-cell;
    vertical-align: middle;
}