响应式图像srcset无法呈现正确的图像大小

时间:2017-09-16 16:12:16

标签: html css html5 image srcset

<img src="http://example.com/image.png"
size="
(max-width: 763px) 100vw,
(max-width: 763px) and (-webkit-min-device-pixel-ratio: 2) 200vw,
(min-width: 764px) 476px,
(min-width: 764px) and (-webkit-min-device-pixel-ratio: 2) 952px,
(min-width: 1116px) 229px,
(min-width: 1116px) and (-webkit-min-device-pixel-ratio: 2) 458px,
(min-width: 1280px) 295px,
(min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) 590px,
(min-width: 1436px) 334px,
(min-width: 1436px) and (-webkit-min-device-pixel-ratio: 2) 668px"
srcset="
http://example.com/image476x286.png 476w,
http://example.com/image229x140.png 229w,
http://example.com/image295x163.png 295w,
http://example.com/image334x192.png 334w,
http://example.com/image458x280.png 458w,
http://example.com/image590x326.png 590w,
http://example.com/image668x384.png 668w,
http://example.com/image952x572.png 952w">

当我尝试在浏览器中查看图像时,视网膜显示宽度为1280像素,我希望浏览器会渲染590w图像。但它实际上渲染了952w,我可能知道我错过了什么,或者我写错了什么?

我已经在尚未访问该网站的浏览器上进行了测试,以确保该图像未被缓存加载。

0 个答案:

没有答案
相关问题