在这个 Image 组件上使用 fill 属性，在对应的图像元素上就会出现 srcset 还有 sizes 这两个属性。

srcset 里的东西是一组可用的图像来源，每条图像来源的中间用逗号分隔开，每条图像来源里面会有一个图像文件的地址，后面还有一个宽度描述符，比如这个 640w 就是一个宽度描述符。

sizes

这个图像元素上的 sizes 属性的作用就是告诉浏览器在什么条件下应该使用图像来源里的哪一个图像文件。它的值是一个或者多个字符串，中间用逗号分隔开。每个字符串由两部分组成，先是一个媒体条件，比如可以使用 max-width 或者 min-width 这些媒体查询条件，然后是空格，再加上源尺寸的值。这个 sizes 里的这组字符串的最后一个项目不能加媒体条件。

如果在图像组件上用了 fill，这个 sizes 属性默认的值就会被设置成 100vw。意思就是选择使用在图像来源里的不小于当前窗口宽度的图像。

vw 表示 viewport width，它是一种相对的长度单位，100vw 的意思就是 100% 的可视窗口的宽度。

window.devicePixelRatio

注意浏览器在确定要显示的图像文件时还会考虑用户的屏幕像素密度，查看屏幕像素密度可以在浏览器的控制台，输入 window.devicePixelRatio ，我这里显示屏幕的像素密度是两倍。这样如果在我的屏幕上要显示 500 像素宽的图像，如果想让这个图像足够清晰，就需要使用实际宽度是 1000 像素的图像。

测试

打开网络，选中图片，再测试一下。把浏览器窗口调整到最小，显示当前的可视窗口的宽度大约是 500 像素。刷新一下页面，观察页面加载的图像文件，这里显示 w=1080，说明当前显示的是宽度为 1080 像素的图像。

当前 sizes 属性的值是 100vw。当窗口的宽度为 500 的时候，这个 500 的宽度乘以2倍的像素密度，结果是 1000，在可用的图像来源里面，浏览器选择使用的就是这个 1080w 的图像。

继续调整窗口的大小，当可视窗口的宽度在 570 以上的时候，浏览器又选择使用了 1200 宽的图像，570 x 2 是 1140 像素，在图像来源组里，比较合适的尺寸就是这个 1200 宽的图像。

sizes

下面我们再试一下，修改一下 sizes 属性的值，里面添加一个 50vw，意思是选择使用宽度小于当前窗口宽度的一半的图像文件。

把浏览器窗口调整到最小，刷新一下页面，当前页面显示的是宽度为 640 像素的图像，因为当前设置的 sizes 属性的值 50vw，当窗口宽度是 500 像素的时候，要用的就是宽度为 500 像素的一半的图像，另外还需要让它乘以屏幕像素密度，所以需要的就是不小于 500 像素宽的图像，在图像来源组里面，合适的图像文件就是这个宽度为 640 像素的图像。

这个 sizes 里面可以添加多个项目，中间用逗号分隔开，这些不同的项目可以分别设置在不同尺寸的窗口下要选择使用的图像文件。

比如 (max-width: 640px) 50vw, 100vw ，这个 sizes 的意思就是，宽度不大于 640 像素的可视窗口，使用不小于当前窗口一半宽度的图像。剩下的使用不小于当前窗口宽度的图像。

把浏览器的窗口调到最小，当前的窗口宽度是 500，不小于 640 像素，所以当前使用的图像的宽度应该不小于 500 / 2 再乘以 2 ，在图像来源组里最适合的就是宽度为 640 像素的图像。

调整浏览器的窗口大小，当窗口宽度大于 640 像素以后，浏览器选择图像来源的条件就变成了 100vw，也就是选择使用的图像的宽度不小于当前窗口的宽度，因为我的设备的像素比是两倍，所以使用的就是不小于当前窗口两倍宽度的图像。