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

Posted 2023-03-06

【中文标题】奇怪的 Chrome 图像大小调整行为

【英文标题】：Strange Chrome image resizing behaviour

【发布时间】：2014-06-09 01:27:25

【问题描述】：

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

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

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

img
    height: 100%
    width: auto;

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

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

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

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

谢谢。

【问题讨论】：

你是否使用 normalize.css 让不同的浏览器运行得更可靠？

如果您在取消捕捉后手动调整 chromes 窗口宽度，是否可以解决问题？另外，当您在开发者工具中查看时（之前和之后），宽度表示什么？

@aDroidman，调整 chrome 窗口的大小不会调整图像的宽度，只会调整高度。我必须刷新页面才能正确调整图像大小。

你能检查一下图像并告诉我正在应用什么 CSS 吗？或者如果可能的话，将我们链接到该页面？

【参考方案1】：

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

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

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

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