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

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?

Possible duplicate of http://stackoverflow.com/questions/14718050/chrome-does-not-re-calculate-width-when-height-changes — Eisa Adil, Jan 13 '14 at 21:18
Thanks for pointing out to this post, @Eisa! But it doesn't serve a CSS only solution. The bottom line is: Force a redraw by JS. I'll keep it in mind though I don't like the idea to attach a redraw on a window resize event. — Thorsten, Jan 14 '14 at 03:11

seancdavis · Answer 1 · 2014-01-13T21:58:09.130

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.

Thanks for your suggestions @scdavis41! But that's not what I'm looking for. I need the same scaling behavior as seen in [my posted fiddle](http://jsfiddle.net/Rgp6h/0/). That code works in the newest releases of other popular browsers, so I assume that only a little modification is necessary to make that code also work in newer versions of Chrome. — Thorsten, Jan 14 '14 at 03:39

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

1 Answers1