Question

我有一个简单的图片元素，应根据浏览器窗口大小显示两张图片中的一张：

  <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来确定它正在加载哪个文件因为图像看起来一样）。

以上代码有问题吗？

Answer 1

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>

图片元素不应该选择文件

1 个答案: