html - img srcset 基于 img 宽度而不是视口(viewport)宽度

Question

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

在摘要中，同一篇文章 HTML 根据上下文以多种方式呈现。

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

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

Answer 1

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

如果您指的是尺寸属性:

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

这是由 lazysizes 完成的.