html - <source> "sizes"属性在 Chrome 中对 <picture> 元素有效吗？

Question

<picture> element 已经在 Chrome 中工作了一年多，但我无法获取 sizes <source> 的属性上类。

下面显示了媒体查询中断点的正确图像，但图像以其默认大小显示，而不是使用sizes中指定的值。属性。

<picture>
   <source media="(min-width: 600px)" 
           sizes="50vw"
           srcset="img1.jpg">
   <source media="(min-width: 400px)"
           sizes="90vw"
           srcset="img2.jpg">
   <img src="img3.jpg" alt="my image">
</picture>

我错过了什么吗？

Answer 1

使用sizes属性时需要使用w描述符，否则无效。

Error: Bad value img1.jpg for attribute srcset on element source: No width specified for image img1.jpg. (When the sizes attribute is present, all image candidate strings must specify a width.)

https://validator.nu/

所以你的 HTML 应该是:

<picture>
   <source media="(min-width: 600px)" 
           sizes="50vw"
           srcset="img1.jpg 300w">
   <source media="(min-width: 400px)"
           sizes="90vw"
           srcset="img2.jpg 200w">
   <img src="img3.jpg" alt="my image">
</picture>

尽管如果每个源只有一个候选，您可以使用 CSS 来根据不同的断点适当调整图像大小，并跳过 size/w. sizes 的主要功能是向浏览器提示要加载 srcset 中的哪些资源；它影响内在大小更多的是一种副作用。