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

时间:2016-10-28 18:06:55

标签: html css image responsive

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

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

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

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

重要的是要注意我有两个图像。当视口为600px或更小时,将显示正方形图像。显示600px以上的任何内容和全宽图像。这是通过display: block;display: none;来控制的。

我无法通过Browserstack模拟问题,但可以在Safari和Chrome中的物理设备(iPhone 6)上模拟。

如果我的img标签声明了宽度和高度会有用吗?

1 个答案:

答案 0 :(得分:4)

为什么不使用min-width

问题始于你没有定义元素的宽度,而是定义它的max-width。在这种情况下,您的图像基于原始宽度。

要想出来,只需添加min-width: 100%;

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