在 hi dpr 屏幕上使用 srcset 时，图像显示大小减半

Question

运行问题是我的 img 标签结构如下

<img srcset="https://truth.bahamut.com.tw/s01/202001/98bf83dafdf2a733f499026a0435ce1a.PNG?w=1000 1x,https://truth.bahamut.com.tw/s01/202001/98bf83dafdf2a733f499026a0435ce1a.PNG 2x" src="https://truth.bahamut.com.tw/s01/202001/98bf83dafdf2a733f499026a0435ce1a.PNG">

和 Mac 的 DPR 为 2x，Chrome 将仅以其高度和宽度的一半显示 img

原图为 1000x1000，在 chrome 上只显示 500x500

和 css 很容易修复，但我很好奇为什么会这样？

Answer 1

您的原始图片为 1000x1000 像素。
在 srcset 声明中，您告诉浏览器它的像素密度应该乘以 x2。

这意味着它应该使用每张 2 个原始像素渲染图像 CSS px。

=> 500x500px

在 hi dpr 屏幕上使用 srcset 时，图像显示大小减半

Image display size reduce to half when using srcset on hi dpr screens

html

css

image

srcset

devicepixelratio