響應式圖片元素從 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>

Answer 1

從文檔：

瀏覽器將：

1. 看它的設備寬度。
2. 確定sizes列表中的哪個媒體條件是第一個為真的。
3. 查看提供給該媒體查詢的插槽大小。
4. 加載srcset列表中引用的與插槽大小相同的圖像，如果沒有，則加載第一個大於所選插槽大小的圖像。