Chrome 不会按比例缩放图像低于第一次渲染的大小答案

【问题标题】：Chrome doesn't scale images proportionally below first rendered sizeChrome 不会按比例缩放图像低于第一次渲染的大小
【发布时间】：2013-06-25 10:40:10
【问题描述】：

我正在尝试将图像缩放到其父级的高度，该高度具有其父级的百分比高度。这可以按预期工作，除非在 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;
}

【问题讨论】：

【解决方案1】：

删除 width 属性可以解决此问题：

img {
    height: 100%;
}

我不确定为什么会发生这种情况，但我猜测当图像按比例缩小时，将宽度始终设置为 auto 会回退到原始宽度（在我尝试过的大多数情况下都不会发生这种情况，但是某种组合可能会触发它以这种方式发生）。不确定这是否是设计使然，但我会继续尝试在某处报告此问题。

【讨论】：

【解决方案2】：

尝试使用 display: block;让 Chrome 将图像缩放到渲染大小以下：

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

【讨论】：