我有以下 img 元素:
<img
srcset="https://placehold.co/200x200 200w, https://placehold.co/1000x1000 1000w"
sizes="(max-width: 600px) 223px, 1000px"
src="https://placehold.co/1000x1000"
alt="Dog"
/>
3 - Look at the slot size given to that media query.
4 - Load the image referenced in the srcset list that has the same
size as the slot or, if there isn't one, the first image that is
bigger than the chosen slot size.
由于尺寸为 223px 的插槽与 200w 不匹配,我预计会加载 1000x1000 图像,但这并没有发生 => https://f4w424.csb.app/。为什么加载 200x200?当我从 223px 切换到 224px 时,就会加载 1000x1000。我很困惑。
我是否遗漏了一些明显的东西,或者浏览器是否在幕后做了一些事情?
下一段还说(我认为矛盾):
将被加载,因为其固有宽度(480w)最接近插槽 尺寸
在学习部分,在文档部分它说:
用户代理自行选择任何可用的来源。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset