1

我试图了解该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">

根据文档：

该sizes语法用于定义跨多个断点的图像大小。srcset然后定义图像数组及其固有大小。

因此该sizes属性定义了跨断点的图像大小。这不就是 CSS 的用途吗？为什么要为图像在 HTML 属性中的显示方式定义类似 CSS 的规则？我在这里想念什么？

在旁注中，为什么官方文件说：

详细了解如何使用新的 srcset 和 sizes 属性超出了本指南的范围...

什么？那让我发笑。那不是文档的用途吗？

4

1 回答 1

1

该sizes属性决定了您列出的图像的哪个版本srcset将用于当前的网页呈现。

你说的对。如果您已经在 CSS 中定义了跨断点的图像大小，那就是重复了。但似乎浏览器不支持从 CSS 中提取该信息并将其用于预先计算图像大小。所以这是目前需要的重复。

更多信息和未来发展的想法在这里：http ://ericportis.com/posts/2014/separated/

我今天了解了lazySizes javascript，顺便说一句，它确实可以完成这项工作。它从 CSS 中提取这些信息，并将其放入sizesimg 的属性中。它对我来说非常有用。

于 2015-02-10T09:48:43.670 回答