html - html图片元素不尊重小型媒体查询

Question

我有这样的事情：

<picture>
  <source media="(min-width:1200)" srcset="big.jpg">
  <source media="(min-width:840)" srcset="small.jpg">
  <img srcset="big.jpg" alt="Test" />
</picture>

我也在使用图片填充。

我的问题是 firefox 和 chrome（我目前正在测试的 2 个）都只会加载 big.jpg，即使在小屏幕上也是如此。还检查了控制台的网络跟踪。

我的 css 将 img 设置为基本流体：

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

那么我的代码有什么问题？

Answer 1

至于我 haz kode的评论，答案是：我的代码在媒体查询中缺少单元声明。

至于完整性，我在这里还为我的用例编写了一个更好的代码：为小屏幕设置一个默认图像，而不是 840 像素以上的图像。

<picture>
  <source media="(min-width:840px)" srcset="big.jpg">
  <img srcset="small.jpg" alt="Foradori">
</picture>

这将正常工作并仅下载当前断点的正确图像。还要记住我们需要图片填充来确保跨浏览器支持。