Create sensitive images with different proportions of the same height

Question

I am trying to figure out a way to create a sensitive row of images of the same height, regardless of the aspect ratio of each image or the width of the container. Actual image files are the same height but vary in width. The problem is that when the container becomes smaller, with certain rounding errors, the image widths become pixels or two different in height. Here's the fiddle http://jsfiddle.net/chris_tsongas/vj2rfath/ , resize the result area, and you'll see that at some widths the images no longer have the same height.

I develop content from CMS, so I have minimal control over the markup and have the right to use css, not js. I tried to set the image height to 100%, but it just makes the image 100% of its original size, not 100% of the container height. Here is the html and css from the fiddle 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%; } 

Answer 1

You want to style the image inside the cell and limit it to the cell size, so you need to change:

 img { max-width:100% } 

to

 .cell img { height:50%; width:auto /* This keeps the aspect ratio correct */ } 

Updated Fiddle

You can still do whatever you want, but it will maintain the same image height.