logo

该视频仅会员有权观看

立即开通课程「Next.js 前端应用开发实践」权限。

¥
199
/ 年

在 Next.js 应用里使用响应式图像:Responsive Image

调整浏览器窗口大小会改变图像尺寸,因为图像宽度设置为100%。图像元素包含srcset属性,但只有一个文件,因此只显示该文件的图像。若要不同窗口大小显示不同图像,可为<image>组件加view属性。图像默认绝对定位,可能覆盖导航栏。为避免问题,要设置正确的样式和定位,如使用object-fit并把图片的容器设置为相对定位。fill属性使图像填充元素,与sizes属性告诉浏览器图片不超过视窗。srcset属性允许浏览器选择不同尺寸图像,以适应窗口宽度变化,提升加载速度。