Chrome无法按比例缩放第一个渲染尺寸的图像

Question

我正在尝试将图片缩放到其父级的高度，父级的高度为其父级的百分比。这可以正常工作，除了在Chrome中，一旦高度降低到首次渲染的大小以下，图像将不会按比例缩放其宽度。关于如何解决这个问题的任何想法？

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

和css：

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

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

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

JSFiddle

Answer 1

删除width属性修复了此问题：

img {
    height: 100%;
}

我不确定为什么会发生这种情况，但我猜测当图像按比例缩小时，使宽度始终处于自动状态会回落到原始宽度（在大多数情况下我都没有尝试过，但某种组合可能会触发它以这种方式发生）。不确定它是否符合设计要求，但我会继续尝试在某处报告。

Fiddle

Answer 2

尝试使用display：block;使Chrome缩放渲染大小以下的图像：

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