响应式 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%;
}