必须同时设置width和height html属性为图片原始像素尺寸（如width="1200" height="800"），否则浏览器无法预知宽高比，初始占位为0×0，图片加载后触发重排导致cls；二者须为无单位纯数字，不支持百分比、auto或px，且仅作用于标签。

会。不写 width 和 height 属性，浏览器无法提前知道图片固有宽高比，初始渲染时占位为 0×0 或不可靠的默认尺寸，等图片加载完成才重排布局——下方文字、按钮、卡片会突然下移，这就是 CLS（Cumulative Layout Shift）的典型来源。

必须同时写 width 和 height 两个 HTML 属性，且值为图片原始像素尺寸（如 width="1200" height="800"），不能带单位、不能用百分比、不能写 auto。这是浏览器最早能拿到的确定性信号，老版本 Safari、SSR 环境（如 Next.js 默认模式）、iframe 嵌入场景尤其依赖它。

常见错误写法

• <img src="a.jpg">（完全没写）
• <img src="a.jpg" style="max-width:90%">（百分比无效）
• <img src="a.jpg" height="auto">（auto 不被 HTML 解析器识别）
• <img src="a.jpg" style="max-width:90%">（带单位，浏览器忽略）

正确做法

Impeccable

Impeccable是一款AI图像与设计工具，开源 AI 前端设计技能包 SKill，解决千篇一律的AI审美。

下载

• <img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="">
• 配合 CSS 控制实际显示：img { width: 100%; height: auto; }
• 若支持现代浏览器，可叠加 aspect-ratio: 3 / 2 增强，但不能替代 HTML 属性

响应式图片（ 场景）也要在 上写

`` 标签本身不渲染、不参与布局，也不支持 `width`/`height`。防 CLS 的关键始终是最外层 ``：哪怕 `` 加载的是 300×200 缩略图，只要 `` 写对，浏览器就按 3:2 比例预留空间，不会抖动。

没拿到原始尺寸怎么办？

CMS 或接口未返回宽高时，不能留空。可： - 按常见比例保守预设（如文章图用 `width="1" height="1"` + CSS `aspect-ratio: 16/9`） - 用骨架屏或固定 `min-height` 占位 - 检查构建工具是否自动 strip 掉了这两个属性——最终 HTML 源码里必须真实存在、值为纯数字

别混淆“控制显示”和“预留空间”

- `width`/`height` 是为浏览器提供宽高比，不是缩放图片 - 真正缩放靠 CSS：`max-width: 100%; height: auto;` 才安全 - 同时写错值（如原图 4:3 却写 `width="800" height="500"`）会导致拉伸，且 `height: auto` 救不回来

不复杂但容易忽略。