调整浏览器窗口的尺寸，界面上显示的图像的尺寸也会随着发生改变。这是因为现在我们给图像添加的样式里面，把 width 设置成了 100%。

检查一下这个图像元素，注意这个 img 图像元素上面有个 srcset 属性，它的值是一组图像来源，目前在这个来源里只有一个图像文件，所以无论可视窗口有多大，默认浏览器只能选择这个图像文件作为图像来源，也就是 src 属性的值。

在项目里先注释掉除了 p1 这个图片以外的其它要显示的图像，暂时再把这个 p1 上用的 priority 注释掉。

回到浏览器，打开网络，选择图片，刷新一下页面，显示这个页面的时候加载了这个图片，然后调整一下浏览窗口的宽度，无论窗口的宽度是多少，页面上显示的始终是同一张照片。

fill

如果你希望在不同尺寸的窗口下显示不同尺寸的图片，可以在 Image 组件上添加一个 fill 属性。页面报了一个错误，提示我们同时设置成了 fill 属性，还有 height 这个样式。先把给这个 Image 设置的样式去掉，只使用 fill 属性。

现在页面上显示的这张照片会填满它的父元素，这样可能会导致图片的显示比例问题。如果我们希望图像保持原有的比例显示，可以再设置一下它的样式。

可以使用 objectFit，把它的值设置成 contain 或者 cover。 如果设置成 cover，图像不但会保持原有比例显示，还会填满它的父元素，多余的部分会被隐藏起来。

现在页面上显示的这张图像就会按原有比例显示了。

不过这里还有个问题，就是图片盖住了页面的导航栏，这是因为在 Image 组件上用了 fill 属性以后，图像元素的位置会被设置成 absolute ，也就是绝对定位，所以在它的父元素的上面，需要设置一下位置属性。

容器

在包装 Image 组件的这个 div 元素上，设置一下 style，添加一个 position 属性，对应的值是 relative，再设置一下容器的高度，比如 560

现在图像元素会相对于这个父元素进行绝对定位，宽度是 100%，显示的高度是父元素的高度，也就是 560 像素。

检查

再检查一下这个图像元素，你会发现，在 Image 组件上用了 fill 属性以后，在图像元素上多了一个 sizes 属性，默认它的值是 100vw，意思就是告诉浏览器当前要显示的图片的尺寸不大于整个可视窗口的宽度 ，另外这个 srcset 里面也多了很多图像来源，这些就是可供浏览器选择使用的不同尺寸的图像文件。

先缩小一下浏览器的窗口，打开网络选项卡，过滤出图片资源，刷新一下页面，现在页面上加载的图片，w 是 1080。

然后再调整一下浏览器的窗口宽度，你会发现，到一定程度的时候，浏览器会加载显示新的图片。浏览器的窗口越宽，加载的图片的宽度也就会越宽。

通过这个名称里的 w 查询符的值，我们可以判定出图片的宽度，不同宽度的图像文件，它的大小是不一样的，宽度越小的图片，体积也就越小，也就是载入的速度会更快。