html - 响应式图片元素从 srcset 下载正确尺寸的图片

Question

根据下面的图片标签，浏览器如何判断srcset属性中的三个文件中的哪一个要下载？我的理解是，浏览器会根据视口的宽度来确定这三个（300px、600px 或 800px）中的哪一个。size 属性根据媒体条件确定显示图像的大小，而不是发送给浏览器的图像。

有没有办法指导浏览器使用哪种尺寸？

<picture>
  <source srcset="~/images/300px.png 300w,
          ~/images/600px.png 600w,
          ~/images/800px.png 800w" 
          sizes="(min-width: 60rem) 80vw,
           (min-width: 40rem) 90vw,
           100vw">
  <img src="~/images/300px.png" alt="Image description">
</picture>

标签： htmlresponsive-imagessrcsetpicture-element

Answer 1

从文档：

浏览器将：

1. 查看它的设备宽度。
2. 找出sizes列表中第一个为真的媒体条件。
3. 查看为该媒体查询提供的插槽大小。
4. 加载srcset列表中引用的与插槽大小相同的图像，如果没有，则加载大于所选插槽大小的第一个图像。