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

Question

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

在调试过程中，我发现在主页上纵向和横向模式之间切换时，顶部全宽图像不会像应该的那样填充视口​​。如果以横向模式刷新页面，您将看到正确的缩放。

我正在使用以下CSS来使我的图像响应：

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

重要的是要注意我有两个图像。当视口为600px或更小时，将显示正方形图像。显示600px以上的任何内容和全宽图像。这是通过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%;
}