Question

使用LazySizes插件（https://github.com/aFarkas/lazysizes）我尝试构建一个图像网格，每个图像都有一个替代版本用于较小的视口。网格（容器）是基于列/行的简单百分比布局。

我不太确定如何声明图像，我只看到更大的版本。我选择使用高分辨率图像并将其缩小50％，最大宽度为容器。这是图像的标记样本：

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw"
  data-src="images/grid/image-small.jpg"
  data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
  alt="" class="lazyload" />

我只需要一个768px的断点。令人困惑的部分是data-sizes属性。我应该在这里声明另一个尺寸，因为图像是高分辨率还是我应该让它们具有全宽？

已添加：脚本启动时生成的标记：

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
  data-src="images/grid/image-small.jpg"
  data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w"
  alt="" class=" lazyloaded"
  sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px"
  srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w"
  src="images/grid/image-small.jpg">

Answer 1

srcset spec spec author here。

嗯，你当前的sizes属性没用;它只是为两个断点指定了相同的大小，并且它们都只是指定默认大小。

你为什么要做一些奇怪的尺码黑客攻击？你将要与<img>试图做的事情作斗争，所以无论你最终如何，都会变成黑客。

只需按照规范：sizes应声明图片在页面中的大小（默认为100vw，因此如果您已经计划图像已满，则可以省略它宽度）。您可以在此处使用MQ，如果您正在进行响应式设计，并且您的不同布局需要以不同的方式调整图像大小，但如果它的大小始终相同，则不要使事情复杂化。

然后只声明你的图像在`srcset中的大小。看起来你已经这样做了，所以这很好（假设你的图像确实是720和1440像素宽）。浏览器将根据该信息选择所需的图像。

我不是100％确定您计划如何使用图片，但听起来您可能计划将图像显示为屏幕宽度的一半？在这种情况下，只需使用sizes=50vw，一切都会照顾好自己。

（我不知道LazySizes是如何运作的，所以如果它做了一些奇怪的事情我就无法帮助你。）

容器元素中img srcset的正确大小？

1 个答案: