Chrome doesn't scale images proportionally below first rendered size

I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?

<div>
    <img src="http://placehold.it/100x100" alt="">
</div>

and the css:

html, body {
    height: 100%;
    margin: 0;
}

div {
    height: 70%;
    background-color: red;
}

img {
    height: 100%;
    width: auto;
}

JSFiddle

Answers


Removing the width property fixes this:

img {
    height: 100%;
}

I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.

Fiddle


Try using display: block; to make Chrome scale the image below the rendering-size:

    display: block; 
min-height: 100%; 
height: 100%; 
width: auto;

Need Your Help

How to install ImageMagick to use with PHP on Windows 7 (3)

php windows windows-7 imagemagick imagick

There are other threads about how to install Imagick on Windows 7 but no help for me so far. :(

ChildProcess::LaunchError for browsermob proxy server start

ruby proxy selenium-webdriver

I'm trying to use browsermob proxy in my Selenium tests. Hence I wrote following code: