google-chrome - Chromium 使用错误的 (?) srcset 和大小

Question

我不确定这是一个真正的错误还是我只是误用了 srcset/sizes。我们有一个具有这些属性的 img 标签(我删除了所有其他属性以使其尽可能简单，示例可以在这里找到:https://jsbin.com/sepesenodo):

• sizes="420px"
• srcset="https://images.simedia.cloud/eassistant/originals/500x334/3090_30bfb97ab7a849a3896d295f0a57bbfc.jpg 500w,https://images.simedia.cloud/eassistant/originals/600x400/3090_30bfb97ab7a849a3896d295f0a57bbfc.jpg 600w "

我们有 27"显示器，分辨率为 2560x1440，缩放比例设置为 125%(在 Windows 设置内)。

window.devicePixelRatio 在 Firefox 和基于 Chrome/Chromium 的 Edge 中给出 1.25。

现在有了上面的 img 属性和显示设置，我希望浏览器选择 600x400 图像(宽度为 420px * 1.25 = 525，这意味着 500x334 图像太小了)。 Firefox 选择 600x400 图像(显示清晰锐利的图像)，而 Chrome 和基于 Chromium 的 Edge 选择 500x334 图像，这会导致图像模糊。

我是不是做错了什么，或者这是 Chrome/Chromium 方面的错误？

Answer 1

一直pointed out在 Twitter 上，当 DPR > 1 时，Chrome 会选择“最接近”的图像而不是“更大的最小图像”。这是预期的行为。

这是对正在发生的事情的演练:

Per spec , 浏览器计算出候选人的密度:

1. 500w/420px = 1.1904761905x
2. 600w/420px = 1.4285714286x

The spec then gives browsers the freedom to pick whichever candidate they want .

Safari 和 Firefox 选择密度高于当前 DPR 的最小候选者。在本例中 (1.25x)，这是 600w 资源。

Chrome 通过几何平均计算出哪个资源是“最近的”。这里的距离是:

1. 1.25x/1.1904761905x = 1.05
2. 1.4285714286x/1.25x = 1.1428571429

距离最小者获胜，因此选择第一个资源 (500w)。