我有这样的事情:
<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;
}
那么我的代码有什么问题呢?
最佳答案
至于I haz kode的评论,答案是:我的代码在媒体查询中缺少单元声明。
至于完整性,我还在这里为我的用例编写了一个更好的代码:为小屏幕使用默认图像,并与 840 像素以上的图像不同。
<picture>
<source media="(min-width:840px)" srcset="big.jpg">
<img srcset="small.jpg" alt="Foradori">
</picture>
这将正常工作并只下载当前断点的正确图像。 还要记住我们需要 picturefill以确保跨浏览器支持。
关于html 图片元素不支持小型媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44890225/