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

时间:2017-07-03 16:23:54

标签: html css picturefill fluid-images picture-element

我有这样的事情:

<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;
}

那我的代码出了什么问题?

1 个答案:

答案 0 :(得分:0)

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

至于完整性,我还在这里写了一个更好的代码用于我的用例:小屏幕的默认图像和840px的不同图像。

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

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