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