9

我正在尝试使用标签srcset和标签。sizesimg

虽然我认为我已经掌握了基础知识——主要归功于这篇文章——但我在该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"

试图在 size 属性中计算这一点似乎很可笑，尤其是考虑到所有这些都可能在每个断点处发生变化。必须让这种大规模复杂的计算与 CSS 的更改保持同步似乎很疯狂。然后你有不完整的浏览器支持calc。

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

注意：我知道 Alexander Farkas 出色的Lazy Sizes，它通过使用data属性为您计算尺寸，但我对标准用法感兴趣。

4

1 回答 1

4

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

基本上尺寸不需要与您的真实图像尺寸 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 支持，所以所有支持 size 的浏览器都有足够好的 calc 支持，所有 respimage polyfill 浏览器也支持 calc in sizes。

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

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

于 2015-08-04T16:25:15.940 回答