<div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=250 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=25 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=23 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=21 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=19 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=17 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=15 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=13 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=11 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=9 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=7 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=5 /> </div> <div class=frame> <img src="http://jsfiddle.net/img/logo.png" height=3 /> </div>
.frame { height: 25px; /* equals max image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }