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;