带有 srcset 的响应式 img 元素

问题描述 投票:0回答:1

我有以下 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 点和第 4 点:

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。我很困惑。

我是否遗漏了一些明显的东西,或者浏览器是否在幕后做了一些事情?

html browser
1个回答
0
投票

下一段还说(我认为矛盾):

将被加载,因为其固有宽度(480w)最接近插槽 尺寸

在学习部分,在文档部分它说:

用户代理自行选择任何可用的来源。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset

© www.soinside.com 2019 - 2024. All rights reserved.