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 来确保跨浏览器支持。

html 图片元素不支持小型媒体查询

html picture element not honoring small media query

html

css

picturefill

fluid-images

picture-element