奇怪的 Chrome 图像大小调整行为

Question

在调整窗口大小时，我在 chrome 中遇到了一些关于图像大小调整的奇怪行为。

当 Chrome 在 Windows 中全屏捕捉时（双击窗口以捕捉全屏），我取消捕捉窗口，导致它恢复到之前未捕捉的大小，图像没有正确缩放。

例如，我有以下 css 代码将图像的大小调整为可用空间的 100% 高度，而宽度为 auto：

img{
    height: 100%
    width: auto;
}

当窗口被全屏捕捉时，它看起来很好，图像的纵横比保持不变。但是现在如果我取消窗口（双击）。高度将调整大小，宽度不会，如下所示：

而在 Internet Explorer 中，取消捕捉看起来像这样：

有人知道为什么 chrome 不能正确调整大小吗？还是我的 css 有问题？

如果您需要更多代码，请询问。

谢谢。

Answer 1

改用 width:100% -> max-width:100%;

我在这个问题之前遇到过一次，并且我已经使用了 size 的两个属性

img{
    max-width:100%;
    max-height:100%;
}

它对我来说很好，并且节省了比例。