Question

我正试图在srcset标签上使用sizes和img来解决问题。

虽然我认为我掌握了基础知识 - 主要归功于this文章 - 我在实际应用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属性为您进行大小计算，但我＆＃39;}我对标准用法感兴趣。

Answer 1

sizes中不允许首先使用％单位。你必须使用大众单位。（可以包括滚动条宽度）。所以你的25％变成了24-25vw。其次，rem和em之间没有真正的区别（在尺寸属性的上下文中）。如果你不在CSS中使用基于em / rem的媒体查询/ min-width / max-width，请不要在你的sizes属性中使用它们。

基本上尺寸不需要与您的实际图像尺寸完全匹配100％。这是一个告诉浏览器大致找到合适的图像候选者。

您的最小宽度：1200px规则以及CSS中的每个最大宽度使用量应该明显属于您的尺寸属性中新媒体条件的一部分。

这使我们留下以下尺寸部分：

(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浏览器也支持calc大小。

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

如果您需要，您可以选择一个真实的网站，我们会附上完整正确的尺寸。但请注意。它必须只有宽度约束。该标准目前不支持高度受限图像（仅限于lazysizes功能）。

使用响应图像的大小属性

1 个答案: