JSFiddle - React, Tailwind, and code Playground
HTML
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</td></tr></table>
</div>
<div class=frame>
<table><tr><td>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</td></tr></table>
</div>
CSS
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
vertical-align: middle;
}
table
{
border-spacing: 0px;
width:100%;
text-align:center;
border-collapse: collapse;
}
td{width:100%; padding:0px;}