css - Making responsive images with different aspect ratios the same height -

css - Making responsive images with different aspect ratios the same height -

i'm trying figure out way create responsive row of images same height, regardless of aspect ratio of each image or width of container. actual image files same height, vary in width. problem when container gets smaller, @ widths rounding errors cause images pixel or 2 different in height. here's fiddle http://jsfiddle.net/chris_tsongas/vj2rfath/, resize result pane , you'll see @ widths images no longer same height.

i'm styling content cms have minimal command on markup, , have mandate utilize css rather js. tried setting image height 100% makes image 100% of original size, not 100% of container height. here html , css fiddle linked above:

<div class="table"> <div class="row"> <div class="cell"> <img src="http://placehold.it/600x400" /> </div> <div class="cell"> <img src="http://placehold.it/300x400" /> </div> </div> </div> .table { display: table; width: 100%; } .row { display: table-row; } .cell { display: table-cell; } img { max-width: 100%; }

you want style image within cell, , constrain cell size, need change:

img { max-width:100% }

to

.cell img { height:50%; width:auto /* keeps aspect ratio right */ } updated fiddle

you can still whatever want table, maintain images same height.

css responsive-design