手机图片很清晰，却可能裁掉产品把手、空间入口或说明项目的主体。响应式首图交付前，应批准重要区域，把手机构图与单纯文件大小选择分开。下载更快，不代表裁切后仍表达相同内容。
适用读者与交付决定
产品品牌与建筑作品网站。把本题作为网站供应方的有限验收任务；实际系统证据不能由教学例子替代。
官方依据与解释边界
picture可为艺术指导选择不同图片来源，img提供回退；实际断点下的素材选择仍需目视核对。 MDN: picture · 核对日期：2026年10月16日。
已填写教学例子
合成例子，不是真实客户案例。 列出有限输入、预期结果及反例，不代表已完成真实平台集成。
窄屏可横向滚动表格。
| 输入／情况 | 检查口径 | 预期结果 |
|---|---|---|
| subject box x40–80,y20–70 | crop x20–90,y0–100 | 完整 |
| 同主体 | crop x0–60,y0–100 | 裁掉一部分 |
| missing subject approval | 区域未知 | 复核 |
怎样执行验收
- 在批准原图上标记主体矩形，使用同一坐标系。
- 列出手机、平板与桌面裁切，比较主体覆盖。
- 逐尺寸检查实际选中素材和回退，包含图片上的文字。
如何解释结果与保留证据
检查器使用合成矩形，不渲染图片。完整包含是本例设计要求，不是通用审美规则。若设计故意裁切，应重新批准要求，不能悄悄缩小主体框来让检查通过。
适用边界
不覆盖授权、自动焦点识别、LCP或替代文本质量；不改旧图片或共享CSS。
离线复核
把下方两份文件存入同一目录，以Node22.13或更新版本运行。示例不联网、不修改任何账号或网站。 已填输入与预期输出 · 可检查的函数
node decision-check.mjs mobile-hero-crop-proof.json