标签不支持width和height属性，因其不渲染内容、不参与布局；防CLS关键在标签必须设置HTML原生width/height属性以预留宽高比。
source 标签根本不支持 width 和 height 属性
sizes 和 srcset，最终渲染的是包裹它的 width 或 height 不仅无效，还会被 HTML 解析器忽略——连警告都不会抛。
防止响应式图片布局偏移，必须在 ![]()
哪怕你用了
- 必须写
width和height两个 HTML 属性（不是 CSS），值为原始图片的像素尺寸，如width="1200" height="800" - 这两个值决定浏览器首次解析时推导出的宽高比，和
srcset选中的实际图片尺寸无关——哪怕最终加载的是 300×200 的缩略图，预留空间仍按 1200×800 的比例算 - 如果
width/height，而只靠srcset解析完成前仍以 0×0 占位，CLS 照样发生 - 常见错误：
width/height，或只写了其中一个
响应式场景下，![]()
填法和单张 width="2400" style="max-width:90%"），而不是视口宽度或容器宽度。原因如下：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 浏览器只用这两个值算宽高比（2400 / 1600 = 3 / 2），不直接当显示尺寸用
- 实际显示尺寸由 CSS 控制，例如
img { width: 100%; height: auto; }—— 这时它会按 3:2 比例缩放，不会失真 - 填错比例（如原图 4:3 却写
width="800" height="600"是对的，但写成width="800" height="500"就会拉伸） - 不要写
width="100%"或height="auto"—— 这些是无效值，浏览器当没写
现代方案：aspect-ratio 可以替代，但不能丢掉 HTML width/height
aspect-ratio: 4 / 3 在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持，但它只是 CSS 层的增强，不是 HTML 原生能力：
- 如果只用
aspect-ratio而不写 HTML 的width/height，旧版 Safari、部分 SSR 环境、或 iframe 嵌入场景中，仍会回退到 0×0 占位 - 正确做法是两者共存：
img { aspect-ratio: 4 / 3; width: 100%; height: auto; } - 这样新浏览器用
aspect-ratio，老浏览器靠 HTML 属性兜底，防 CLS 更稳
真正容易被忽略的一点：很多构建工具或 CMS 生成 width/height，以为“反正有 srcset”。结果页面一上线，Lighthouse 的 CLS 分数就飘红——问题不在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
