Picturefill 2：sizes 属性的用途是什么？
Picturefill 2: What is the purpose of the sizes attribute?
我正在尝试了解 sizes 属性在 PictureFill 2.0 polyfill 中的确切用途。以下是一些基本示例：
<img sizes="100vw, (min-width: 40em) 80vw"
srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="test">
<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="medium.jpg 375w, medium.jpg 480w, large.jpg 768w" alt="A car">
根据 documentation:
The sizes syntax is used to define the size of the image across a
number of breakpoints. srcset then defines an array of images and
their inherent sizes.
因此 sizes 属性定义了跨断点的图像大小。 CSS 不就是为了这个吗？为什么要为图像在 HTML 属性中的显示方式定义类似 CSS 的规则？我在这里错过了什么？
附带说明一下，为什么 官方文档 说：
It's beyond the scope of this guide to get into much detail about how to use the new srcset & sizes attributes...
卧槽？这让我笑了。那不是文档吗？
sizes 属性决定您在 srcset 中列出的图像的哪个版本将用于网页的当前呈现。
你是对的。如果您已经跨断点在 CSS 中定义了图像大小，那就是重复。但似乎浏览器不支持从 CSS 中提取该信息并将其用于预先计算图像大小。所以这是当前需要的一个副本。
这里有更多信息和未来发展的想法：http://ericportis.com/posts/2014/separated/
我今天了解了 lazySizes javascript，顺便说一句，它确实可以完成这项工作。它从 CSS 中提取此信息，并将其放入 img 的 sizes 属性中。它对我来说非常有效。
我正在尝试了解 sizes 属性在 PictureFill 2.0 polyfill 中的确切用途。以下是一些基本示例：
<img sizes="100vw, (min-width: 40em) 80vw"
srcset="pic-small.png 400w, pic-medium.png 800w, pic-large.png 1200w" alt="test">
<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="medium.jpg 375w, medium.jpg 480w, large.jpg 768w" alt="A car">
根据 documentation:
The
sizessyntax is used to define the size of the image across a number of breakpoints.srcsetthen defines an array of images and their inherent sizes.
因此 sizes 属性定义了跨断点的图像大小。 CSS 不就是为了这个吗？为什么要为图像在 HTML 属性中的显示方式定义类似 CSS 的规则？我在这里错过了什么？
附带说明一下，为什么 官方文档 说：
It's beyond the scope of this guide to get into much detail about how to use the new srcset & sizes attributes...
卧槽？这让我笑了。那不是文档吗？
sizes 属性决定您在 srcset 中列出的图像的哪个版本将用于网页的当前呈现。
你是对的。如果您已经跨断点在 CSS 中定义了图像大小，那就是重复。但似乎浏览器不支持从 CSS 中提取该信息并将其用于预先计算图像大小。所以这是当前需要的一个副本。
这里有更多信息和未来发展的想法：http://ericportis.com/posts/2014/separated/
我今天了解了 lazySizes javascript，顺便说一句，它确实可以完成这项工作。它从 CSS 中提取此信息，并将其放入 img 的 sizes 属性中。它对我来说非常有效。