响应式 img srcset 在横向模式下不缩放

Question

我最近构建了以下 website。该站点在所有图像上使用 img srcset。

在调试过程中，我发现在主页上切换纵向和横向模式时，顶部的全宽图像没有按应有的方式填充视口。如果您以横向模式刷新页面，您将看到正确的缩放比例。

我正在使用以下 CSS 让我的图片响应：

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

重要的是要注意我为此准备了两张图片。当视口为 600 像素或更小时，将显示方形图像。任何超过 600 像素的内容都会显示全宽图像。这是在 css 和 display: block; 和 display: none; 中控制的。

我无法通过 Browserstack 模拟问题，但可以在 Safari 和 Chrome.

的物理设备上 (iPhone 6)

如果我的 img 标签声明了宽度和高度，会有帮助吗？

Answer 1

你为什么不用min-width？

问题始于这样一个事实，即您没有定义元素的宽度，而是定义了元素的宽度 max-width。在这种情况下，您的图像基于原始宽度。

---

要弄清楚只需添加 min-width: 100%;

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