响应式图片选择显示错误的图像

Question

我想在不同的视口上显示不同的图像。因此，我使用了

<picture>

标签和两个源以及相应的媒体查询。我已经清除过几次缓存了。

这是我的代码：

<picture>
    <source srcset="img/small.png" media="(max-width: 1535px)"/>
    <source srcset="img/large.png" media="(min-width: 1536px)"/>
    <img src="img/large.png"/>
</picture>

但是，如果页面加载的宽度为 1535px，则使用较大的图像，尽管它只能从 1536px 的宽度加载。

如果页面加载的尺寸为 1534px 及更低，则加载较小的图像，这是正确的。所以这个问题只存在于1535px。

你知道原因是什么吗？

Answer 1

最小和最大都使用 1535px

<picture>
    <source srcset="img/small.png" media="(max-width: 1535px)"/>
    <source srcset="img/large.png" media="(min-width: 1536px)"/>
    <img src="img/large.png" alt="Description for your image"/>
</picture>