html - 在 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">

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

原始图像是 1000x1000，在 chrome 上它只显示 500x500

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

Answer 1

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

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

=> 500x500 像素