2

该<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>

我错过了什么吗？

4

1 回答 1

4

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

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

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加载哪些资源；它影响内在大小更像是一种副作用。

于 2016-02-19T19:20:36.093 回答