img srcset 基于 img 宽度而不是视口宽度

Question

我有一个部分模板，可以在页面上呈现一篇文章，该页面基本上是图像和随附的文本。在登录页面中，我将在页面上有几篇文章，不同的类别，主要文章将是全宽的，次要文章是一半，第三个宽度。有时侧边栏文章的宽度也会非常小。然后根据视口，有时图像可以呈现在文本上方或左侧。

总而言之，同一篇文章的 HTML 会根据上下文以多种方式呈现。

在最新的 srcset 规范中有没有办法解决这个问题？

据我所知，每个上下文必须有不同的尺寸属性，基本上将布局/断点耦合到标记，在我的实现中具有如此多的上下文，这将使服务器端逻辑变得可怕。

Answer 1

srcset 中的宽度描述符始终定义图像本身的宽度，而不是视口。

如果您指的是尺寸属性：

简而言之，你不能。这样做的原因是，浏览器在完全加载/解析样式表之前就开始获取图像。这意味着布局是未知的。但是，如果您使用延迟加载技术，您可以自动计算 size 属性。

这是由lazysizes完成的。