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

Question

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

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

我使用以下CSS使我的图像具有响应性：

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

重要的是要注意，我有两张图片。视口为600px或以下时显示正方形图像。任何超过600px和全宽图像显示。这是控制在css与显示：块；和显示：无；。

我无法通过Browserstack模拟这个问题，但可以在Safari和Chrome的物理设备（iPhone6）上模拟。

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

Answer 1

为什么不使用最小宽度？

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

要解决这个问题，只需添加minwidth:100%

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