我有这样的事情:
<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;
}
那我的代码出了什么问题?
答案 0 :(得分:0)
关于I haz kode的评论,答案是:我的代码在媒体查询中缺少单位声明。
至于完整性,我还在这里写了一个更好的代码用于我的用例:小屏幕的默认图像和840px的不同图像。
<picture>
<source media="(min-width:840px)" srcset="big.jpg">
<img srcset="small.jpg" alt="Foradori">
</picture>
这将正常工作并仅下载当前断点的正确图像。 还记得我们需要picturefill来确保跨浏览器的支持。