基于图片宽度而非视口宽度的img srcset

Question

我有一个部分模板，用于在页面上呈现文章，基本上是一张图片和相应的文字。在落地页上，将会有几篇文章，具有不同的类别，引导文章将是全宽度，次要文章为半宽度，第三个宽度为三分之一。有时边栏文章的宽度非常小。然后根据视口的大小，有时图像可以在文本上方或左侧呈现。

总之，相同的文章HTML在不同的上下文中呈现多种方式。

在最新的srcset规范中是否有任何方法来解决这个问题？

据我所知，我需要针对每个上下文设置不同的尺寸属性，实质上将布局/断点与标记耦合在一起，在我的实现中，由于有这么多的上下文，服务器端逻辑将变得可怕。

- Keegan 82

Answer 1

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

如果您指的是 sizes 属性：

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

这是通过 lazysizes 完成的。

- alexander farkas

---

感谢您的回复，嗯，我有点困惑。我有一张图片周围有10像素的填充，所以如果视口是1000像素，那么图片的宽度将为980像素。如果我在srcset中设置了一个1000w的图像，当视口为1000而不是1020时，它将加载该图像。根据您最后一段的描述，它只能依赖于视口作为下载哪个图像的指南，因为CSS可能无法解析。 - Keegan 82

举个例子，这里的两张图片 http://codepen.io/anon/pen/ZbEvwB 尽管大小不同，但始终相同。视口大小似乎决定了加载哪个src。如果我的浏览器> 800，则它们都会加载1600，如果<800，则它们会加载800。 - Keegan 82

这里有两点需要注意：1. 您需要添加sizes属性（即：sizes="50vw"和sizes="25vw"），否则浏览器会默认为两个图像都使用“100vw”。2. Chrome会检查是否已经缓存了更高分辨率的图像，并在找到缓存的图像时选择它。 - alexander farkas

好的，感谢澄清。对于我文章布局中不同大小标签的各种排列组合情况，要想全部考虑到是不可能的。很遗憾你无法强制浏览器推迟决定直到它知道图像大小并基于此进行决策。当你已经在 CSS 中定义了断点信息时，在标记中放置这些信息似乎有些不妥。我明白浏览器希望尽早开始加载资源的原因，但覆盖此行为会更好。 - Keegan 82

我已经通过在页面底部的脚本解决了这个问题，该脚本计算图像占视口的百分比，并相应地设置大小属性。如果你在这个时候设置srcset和sizes属性，它就能很好地工作。这意味着非 JS 客户端没有图像，但我可以接受这样的影响。 - Keegan 82

在我看来，这完全是W3C在2020年的一种胡说八道。为什么我们要根据视口而不是实际图像宽度来确定图像大小？除非有人想到了什么办法，否则我仍然需要使用JavaScript来完成这个任务... - Kevin Parker