使用响应图像的大小属性

Question

我在试图环绕使用我的头的过程srcset和sizes上img标签.

虽然我认为我掌握了基础知识 - 主要归功于这篇文章 - 我在实际应用sizes属性方面苦苦挣扎.

在我可以找到的所有示例中,事物都被大量简化,并且size属性被声明为好像在每个断点处,图像宽度将是视口宽度的精确比例,允许使用vm单位.例如:

sizes="(min-width: 36rem) 33.3vw,
       100vw"

当然,在现实生活中,图像通常位于其他容器内,这些容器本身可能位于其他容器内等等,每个容器都有自己的边距,填充或定位.

可以公平地说除了最简单的情况(当图像具有流体宽度并且不仅仅是视口的精确百分比时),calc必须使用,可能会在html标记中添加可怕的复杂计算,因为图像尺寸需要计算从视口宽度,向下通过任何容器到图像？例如,如何计算位于具有7px填充的容器的图像的正确大小,该容器本身位于容器的45%容器内,其容量为15px,位于侧边栏内,占主页容器的25% 15px的填充,最小宽度为1220px？

sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
       100vw"

试图在sizes属性中计算这个似乎很荒谬,特别是考虑到所有这些都可能在每个断点处发生变化.必须保持这个大规模复杂的计算与CSS的变化同步似乎是疯狂的.然后你有了补丁的浏览器支持calc.

我觉得我错过了一些明显的东西,但它是什么？

注意:我知道Alexander Farkas优秀的Lazy Sizes,它通过使用data属性为您进行大小计算,但我对标准用法感兴趣.

Answer 1

首先， 中不允许使用 % 单位sizes。您必须使用 vw 单位。（其中可以包括滚动条宽度）。例如，您的 25% 变为 24-25vw。其次，rem 和 em 之间没有真正的区别（在尺寸属性的上下文中）。如果您不在 CSS 中使用基于 em/rem 的媒体查询/最小宽度/最大宽度，则切勿在您的尺寸属性中使用它们。

基本上尺寸不需要 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, <....>"

关于计算支持：picturefill 3.0 beta 和 respimage 都包含对 IE8+ 的计算支持，因此所有支持尺寸的浏览器都具有足够好的计算支持，并且所有 respimage polyfilled 浏览器也支持尺寸计算。

关于弄清楚这一点。这显然很痛苦，在大多数情况下，您的 CMS/后端系统应该会有所帮助。在大多数项目中，您应该就一组有限的允许图像格式达成一致，并编写与您的设计相对应的尺寸。并且您的后端应该设法将这些尺寸附加到正确的位置。如果这是不可能的。要么使用lazySizes，要么至少对最重要的图像使用（即：大图像格式，因为这是最能保存数据的地方）srcset。sizes

如果您愿意，您可以选择一个真实的网站，我们会为其附加完整正确的尺寸。但要注意。它必须仅受宽度限制。该标准当前不支持高度受限的图像（这只是一个延迟大小功能）。