<source> "sizes" 属性在 Chrome 中是否适用于 <picture> 元素？

Question

<picture> 元素已经在 Chrome 中工作了一年多，但我无法让 <source> 的 sizes 属性工作。

下面显示了媒体查询中断点的正确图像，但图像以默认大小显示，而不是使用 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>

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

<source> "sizes" 属性在 Chrome 中是否适用于 <picture> 元素？

Does <source> "sizes" attribute work in Chrome for <picture> element?

html

image

responsive-images