Dynamically scale images by height using pure CSS in Chrome 27 and above - css

Question

Thanks to James Montagne's solution I built a one-row-gallery which scales images in a specific behaviour just using CSS.
Works great - except in Chrome 27 and above. Here the images' width stay at the initial value while the heights scale properly.
Please check this Fiddle or the code below:
HTML:
<div>
<img src="http://placekitten.com/200/300" class="vert"/>
<img src="http://placekitten.com/500/200" class="horiz"/>
<img src="http://placekitten.com/200/300" class="vert"/>
<img src="http://placekitten.com/400/300" class="horiz"/>
<img src="http://placekitten.com/200/300" class="vert"/>
</div>
CSS:
body,html{
height: 100%;
}
div{
white-space: nowrap;
height: 100%;
}
img{
min-height: 200px;
height: 100%;
vertical-align: top;
}
.horiz{
max-height: 300px;
}
.vert{
max-height: 500px;
}
I already dug through the Chrome 27 changelog (~13MB) but didn't find any useful info on that matter.
Any ideas how to avoid the images to blur on a window resize in Chrome >= 27?

Answer 1

If you want to change the dimensions of images with CSS, you should choose one dimension to change and let the other adjust automatically.
In this case, if you're more concerned with the width of the images, you could get rid of min-height and do something like this:
body,html{
height: 100%;
}
div{
height: 100%;
width: 100%;
padding: 0;
}
img{
float: left;
height: auto;
vertical-align: top;
width: 19%;
margin: 0.5%;
}
See example here.
Since I know you have a row of 5 images, we can use a width of 19% of the div width and fit them nicely.
EDIT
On the other hand, if you're looking to control minimum and maximum heights, you can wrap your images in a container, specify an explicit height on that container, and position the images within the container. Here you lose the ability to control keeping all images on one line while maintaining the original aspect ratio.
This example is here.