响应式全宽图像和 srcset

Question

我有一个网站，我想要一些全角图像（它们将被垂直裁剪，以获得视差外观）。我想我已经阅读了很多关于 srcset 和 sizes 的文章并尝试了一些东西，但我无法弄清楚（a）我是否需要使用“尺寸”，以及（b）尤其是没有sizes，浏览器将如何选择要加载的图像。

具体来说，这是一个图像规范：

<img src="/images/full/2c8n.jpg" srcset="
  /images/320/2c8n.jpg 320w,
  /images/640/2c8n.jpg 640w,
  /images/1024/2c8n.jpg 1024w,
  /images/full/2c8n.jpg">

这是在一个全宽容器 div 中，所以图像应该是边到边。

我希望它在移动设备上加载最小的一个，在大型台式机上加载最大的一个（/images/full），但这似乎没有发生。我已经看到也可以使用x 样式，但我不确定如何选择使用每个比例因子的图像，如果这甚至是正确的方法。知道我做错了什么以及正确的方法是什么？

Answer 1

文档中关于sizes 属性的内容非常不清楚。我能够确定的是它只影响渲染图像的大小，而不影响图像选择。所以，sizes="(max-width: 500px) 50vw, 100vw" 告诉浏览器：

1. 如果视口最大为 500 像素宽，则以 50% 的视口 (50vw) 渲染图像
2. 如果视口为 501 像素或更大，则以 100% 的视口 (100vw) 渲染图像

对于srcset 属性，浏览器会查看您的图像列表，猜测它应该填充的插槽尺寸，然后选择下一个尺寸。因此，根据您的要求，边缘到边缘，这就是它选择使用哪个文件的方式：

1. 视口宽度最大为 319px -> /images/320/2c8n.jpg
2. 大众 320px 到 639px -> /images/640/2c8n.jpg
3. 大众 640 至 1023 -> /images/1024/2c8n.jpg
4. 大众 1024 及以上 -> /images/full/2c8n.jpg

我还阅读过，但尚未验证，它使用的是找到的第一个符合src 和srcset 标记之间要求的图像。属性的顺序可能会有所不同。再次，阅读但未验证。