Fluid height images : Chrome & Safari bug

Question

I have container that is positioned absolutely from the top and bottom of the screen.

Images in the container are scaled to fill the height, the width should be proportional.

Images are set inline, and the container has white-space:nowrap to ensure the elements sit in a row. CSS as below:

section {position:absolute; top:100px; bottom:100px; font-size:0; left: 0; white-space: nowrap;}
section img {width:auto; height:100%; display:inline;}

This works as expected in Firefox, in Chrome and Safari this works until the browser is resized. Upon resize the image fits to height and the width remains constant.

Please see my reduced test case here: http://codepen.io/anon/pen/Beasx/

Any ideas?

Answer 1

http://codepen.io/anon/pen/BtyeG/

To fix the distorted image resizing in Chome I narrowed it down to this:

section img {
  max-width:100%;
}