html - 图片元素没有选择它应该的文件

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>