是<source />＆＃34;尺寸＆＃34;属性在Chrome中用于<picture>元素？

Question

<picture>元素已在Chrome中使用了一年多，但我无法获得sizes的{​​{1}}属性。

以下内容显示媒体查询中断点的正确图像，但图像以默认大小显示，而不是使用<source>属性中指定的值。

sizes

我错过了什么吗？

Answer 1

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

  

错误：元素源上属性srcset的错误值img1.jpg：没有为图像img1.jpg指定宽度。 （当存在sizes属性时，所有图像候选字符串都必须指定宽度。）

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中的哪些资源;它影响内在大小更多的是副作用。