将尺寸属性用于响应式图像
Use Of the Sizes Attribute for Reponsive Images
我正在尝试在 img 标签上使用 srcset 和 sizes 来解决问题。
虽然我认为我已经掌握了基础知识 - 主要感谢 this 文章 - 我在 sizes 属性的实际应用中苦苦挣扎。
在我能找到的所有示例中，事情都被大大简化了，并且 sizes 属性被声明为好像在每个断点处，图像宽度将是视口宽度的精确比例，允许使用 vm 单位。例如：
sizes="(min-width: 36rem) 33.3vw,
100vw"
当然在现实生活中，图像通常在其他容器中，而这些容器本身可能在其他容器中等等，每个容器都有自己的边距、填充或定位。
可以公平地说，除了最简单的情况（当图像具有流动宽度并且不仅仅是视口的精确百分比时），必须使用 calc，可能会增加极其复杂的计算到 html 标记，因为需要从视口宽度开始计算图像尺寸，向下通过任何容器到图像？例如，您将如何计算图像的正确大小，该图像位于一个具有 7px 填充的容器中，该容器本身位于一个容器内，该容器占其容器的 45%，边距为 15px，位于主页面容器的 25% 的侧边栏内15 像素的内边距，最小宽度为 1220 像素？
sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
100vw"
尝试在 sizes 属性中计算它似乎很荒谬，尤其是考虑到所有这些都可能在每个断点处发生变化。必须让这个极其复杂的计算与 CSS 的更改同步，这似乎很疯狂。然后你有 calc.
的补丁浏览器支持
我觉得我漏掉了一些明显的东西，那是什么？
注意：我知道 Alexander Farkas 的出色 Lazy Sizes 通过使用 data 属性为您计算尺寸，但我对标准感兴趣用法。
首先 sizes 中不允许使用 % 单位。您必须使用 vw 单位。 （其中可以包括滚动条宽度）。例如，您的 25% 变为 24-25vw。
其次，rem 和 em 之间没有真正的区别（在 sizes 属性的上下文中）。如果您不在 CSS 中使用基于 em/rem 的媒体查询/min-width/max-width，则切勿在您的尺寸属性中使用它们。
基本上尺寸不需要 100% 完全匹配您的真实图像尺寸。它告诉浏览器大致找到正确的候选图像。
您的 min-width: 1200px 规则以及您 CSS 中的每个 max-width 用法都应该清楚地成为您的 sizes 属性中新媒体条件的一部分。
这给我们留下了以下尺寸部分：
(min-width: 1200px) calc(11vw - 44px)
如果您添加了定义的最大宽度或阻止侧边栏增长的媒体查询，您可以不太正确，只需将 11vw - 44px 转换为 10vw:
例如：
sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>"
关于 calc 支持：picturefill 3.0 beta 和 respimage，包括对 IE8+ 的 calc 支持，所以所有支持尺寸的浏览器都有足够好的 calc 支持，所有 respimage polyfilled 浏览器也支持尺寸计算。
关于弄清楚这一点。这显然很痛苦，在大多数情况下，您的 CMS/backend 系统应该能帮上忙。在大多数项目中，您应该就一组有限的允许图像格式达成一致，并写下与您的设计相对应的尺寸。并且您的后端应该设法将这些尺寸附加在正确的位置。如果这是不可能的。要么使用真正的 lazySizes 要么使用 srcset 和 sizes 至少对于最重要的图像（即：大图像格式，因为这是您可以最节省数据的地方）。
如果您愿意，可以选择一个真实的网站，我们会为它附上完整的正确尺寸。但请注意。它必须仅受宽度限制。该标准目前不支持高度受限的图像（这只是一个 lazysizes 功能）。
我正在尝试在 img 标签上使用 srcset 和 sizes 来解决问题。
虽然我认为我已经掌握了基础知识 - 主要感谢 this 文章 - 我在 sizes 属性的实际应用中苦苦挣扎。
在我能找到的所有示例中，事情都被大大简化了，并且 sizes 属性被声明为好像在每个断点处，图像宽度将是视口宽度的精确比例，允许使用 vm 单位。例如：
sizes="(min-width: 36rem) 33.3vw,
100vw"
当然在现实生活中，图像通常在其他容器中，而这些容器本身可能在其他容器中等等，每个容器都有自己的边距、填充或定位。
可以公平地说，除了最简单的情况（当图像具有流动宽度并且不仅仅是视口的精确百分比时），必须使用 calc，可能会增加极其复杂的计算到 html 标记，因为需要从视口宽度开始计算图像尺寸，向下通过任何容器到图像？例如，您将如何计算图像的正确大小，该图像位于一个具有 7px 填充的容器中，该容器本身位于一个容器内，该容器占其容器的 45%，边距为 15px，位于主页面容器的 25% 的侧边栏内15 像素的内边距，最小宽度为 1220 像素？
sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
100vw"
尝试在 sizes 属性中计算它似乎很荒谬，尤其是考虑到所有这些都可能在每个断点处发生变化。必须让这个极其复杂的计算与 CSS 的更改同步，这似乎很疯狂。然后你有 calc.
我觉得我漏掉了一些明显的东西，那是什么？
注意：我知道 Alexander Farkas 的出色 Lazy Sizes 通过使用 data 属性为您计算尺寸，但我对标准感兴趣用法。
首先 sizes 中不允许使用 % 单位。您必须使用 vw 单位。 （其中可以包括滚动条宽度）。例如，您的 25% 变为 24-25vw。
其次，rem 和 em 之间没有真正的区别（在 sizes 属性的上下文中）。如果您不在 CSS 中使用基于 em/rem 的媒体查询/min-width/max-width，则切勿在您的尺寸属性中使用它们。
基本上尺寸不需要 100% 完全匹配您的真实图像尺寸。它告诉浏览器大致找到正确的候选图像。
您的 min-width: 1200px 规则以及您 CSS 中的每个 max-width 用法都应该清楚地成为您的 sizes 属性中新媒体条件的一部分。
这给我们留下了以下尺寸部分：
(min-width: 1200px) calc(11vw - 44px)
如果您添加了定义的最大宽度或阻止侧边栏增长的媒体查询，您可以不太正确，只需将 11vw - 44px 转换为 10vw:
例如：
sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>"
关于 calc 支持：picturefill 3.0 beta 和 respimage，包括对 IE8+ 的 calc 支持，所以所有支持尺寸的浏览器都有足够好的 calc 支持，所有 respimage polyfilled 浏览器也支持尺寸计算。
关于弄清楚这一点。这显然很痛苦，在大多数情况下，您的 CMS/backend 系统应该能帮上忙。在大多数项目中，您应该就一组有限的允许图像格式达成一致，并写下与您的设计相对应的尺寸。并且您的后端应该设法将这些尺寸附加在正确的位置。如果这是不可能的。要么使用真正的 lazySizes 要么使用 srcset 和 sizes 至少对于最重要的图像（即：大图像格式，因为这是您可以最节省数据的地方）。
如果您愿意，可以选择一个真实的网站，我们会为它附上完整的正确尺寸。但请注意。它必须仅受宽度限制。该标准目前不支持高度受限的图像（这只是一个 lazysizes 功能）。