html - "sizes"属性在 Chrome 中是否适用于 元素？

Question

<picture>元素已经在 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>

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