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>

我也在使用 picturefill .

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

我的 CSS 将 img 设置为基本流体:

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

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

Answer 1

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

至于完整性，我还在这里为我的用例编写了一个更好的代码:为小屏幕使用默认图像，并与 840 像素以上的图像不同。

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

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