CODEWITHSUNDEEP
csshtmlfluid-layout
addedlovely
addedlovely

Reputation: 3194

Fluid height images : Chrome & Safari bug

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?

Upvotes: 1

Views: 1406

Answers (1)

JohanVdR
JohanVdR

Reputation: 2878

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%;
}

Upvotes: 2

Related Questions