响应式图片元素从 srcset 下载正确大小的图片

Question

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

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

<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>

Answer 1

来自documentation：

浏览器将：

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