html - 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;
}

score 1 · Accepted Answer

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

img {
    height: 100%;
}

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

score 0 · Accepted Answer

尝试使用 display: block; 使 Chrome 缩放低于渲染大小的图像：

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

2 回答 2