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

Question

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

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

在最新的 srcset 规范中有什么方法可以解释这一点吗？

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

Answer 1

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

如果您指的是尺寸属性：

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

这是由lazysizes完成的。