Chrome浏览器无法按比例缩放图像，使其低于第一个渲染的尺寸

Question

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

Answer 1

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

Answer 2

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

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