logo

该视频仅会员有权观看

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

¥
199
/ 年

通过 sizes 属性告诉浏览器要选择使用的图像

  • 图像组件可以使用srcset属性来定义一组图像资源,通过逗号分隔每个图像源,其中包含图像地址和宽度描述符(例如640w)。
  • sizes属性用于指导浏览器在不同条件下选择哪个图像资源。值为多个字符串,用逗号分隔,可以包含媒体查询条件(如max-width或min-width),后接图像的原始尺寸值。
  • 如果组件使用了fill属性,默认sizes值设为100vw,意味着浏览器会选择不小于当前视口宽度的图像资源。
  • 浏览器在选择图像文件时会考虑设备屏幕的像素密度,devicePixelRatio可以检查屏幕像素密度。
  • 调整浏览器大小并刷新可测试图像加载情况,选择的图像宽度会根据当前sizes值和屏幕像素密度进行调整。
  • sizes属性可以包含多个条件,用于在不同窗口尺寸下选择不同的图像资源。
  • 屏幕像素密度的考虑意味着最终选择的图像可能需要是当前窗口大小的两倍宽度,以保证图像清晰度。