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;