我有一个简单的图片元素,它应该根据浏览器窗口大小显示两张图片中的一张:
<picture>
<source src="images/still_life-650_medium_2x.jpg" media="max-width:899px" type="image/jpeg">
<source src="images/still_life-1600_large_2x.jpg" media="min-width:900px" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit">
</picture>
然而,当我使用小于 899px 的浏览器对其进行测试时,无论我实际上将其调整为多小,它总是会加载“images/still_life-1600_large_2x.jpg”文件(使用 Chrome devtools 来确定它正在加载的文件因为图像看起来一样)。
上面的代码有问题吗?
最佳答案
Deryck在他的评论中回答了这个问题。
<picture>
<source srcset="images/still_life-650_medium_2x.jpg" media="(max-width:899px)" type="image/jpeg">
<source srcset="images/still_life-1600_large_2x.jpg" media="(min-width:900px)" type="image/jpeg">
<img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit">
</picture>
关于html - 图片元素没有选择它应该的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37671967/