NEXT.JS IMAGE · SLOT / DPR / GEOMETRY

响应式图片选择与几何实验室

先让浏览器知道图片要占多大空间，再让它从候选集中挑一个合适资源。槽位选择和几何占位是两件事，必须分别验证。

明确标注
教学模型

布局与候选

srcset INPUT
viewport 宽度
1280 px
设备像素比 DPR
可用 srcset 候选宽度至少保留一个候选；单位为宽度描述符 w。

浏览器选择模型

currentSrc OUTPUT
CSS 布局 sizes 槽位 × DPR currentSrc
真实 CSS 槽位384px(1200 - 32 - 48) / 3
sizes 声明槽位384px正确描述当前布局
声明目标 × DPR768px384 × 2
教学模型 currentSrc828w首个不小于 768px 的候选
viewport 1280px3 列 · padding 16px · gap 24px

候选尺：绿色框是教学模型选中的 currentSrc

合适

候选覆盖真实像素需求

828w 对应真实需求 768px，像素面积余量约 16%。这不是实际下载字节估算。

几何占位与 CLS 工作台

`width/height` 提供固有比例；`fill` 依赖父容器提前拥有稳定尺寸。cover/contain 只改变构图。

LOAD BEFORE / AFTER
Image 几何模式
选择 width/height 时，该项不会决定固有比例占位。
object-fit
首帧：图片尚未到达
预留空间

由 1600 / 900 预留 16:9

加载后：真实图片 16:9

几何尺寸保持不变

稳定占位：低 CLS 风险

width 和 height 提供与真实图片一致的固有比例，CSS 宽度变化时高度仍可提前计算。

定位与尺寸width/height 模式不依赖 fill 父容器
构图行为cover：保持比例并裁边填满
关键边界width/height 不是最终 CSS 显示像素

图片工程挑战

每题区分资源选择、几何占位和构图行为；答错后仍可继续选择。

已完成 0 / 12 · 正确 00 / 12

挑战 01 / 12

CSS 槽位网格列数、padding、gap 决定实际显示宽度
sizes告诉浏览器布局槽位，不是源文件尺寸
DPR槽位 CSS 像素乘设备像素比得到需求量级
currentSrc浏览器最终采用的候选 URL
width / height固有比例与提前占位，不锁定最终显示尺寸
fill绝对定位填满，父容器必须稳定且可定位
cover填满容器，可能裁掉边缘
contain完整显示，可能留下空白