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

Question

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

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

有没有办法在最新的srcset规范中考虑到这一点？

据我所知，我必须在每个上下文中有一个不同的大小属性，基本上将布局/断点连接到标记，在我的实现中有这么多的上下文，会使服务器端的逻辑变得可怕。

Answer 1

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

如果您指的是尺寸属性：

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

这是由lazysizes完成的。