CSS 网格 + srcset + 尺寸适用于多种宽度和屏幕分辨率？

Question

我有一个 14 列的 CSS 网格，位于桌面页面的中心。我所有的图片都设置为max-width: 100%，所以宽度取决于列容器的宽度。

<img src="image_path.jpg&s=image-390"
     srcset="image_path.jpg&s=image-390 390w,
             image_path.jpg&s=image-585 585w,
             image_path.jpg&s=image-780 780w,
             image_path.jpg&s=image-1170 1170w,
             image_path.jpg&s=image-1560 1560w,
     sizes="(min-width: 1023px) 300px, 100vw">

在台式机上，列中图像的宽度为 300 像素（4 col），但是当我在设备比率为 2 的 Macbook Pro 上检查网络选项卡时，为什么它会提供 585 图像？不应该是780吗？它是 300*2=600 所以下一张图片是 780 对吧？此外，如果我出于某种原因将其更改为 380 像素，它会拉出 780 图像（

Answer 1

发现lazysizes 插件解决了我的问题。