必须同时设置width和height属性为图片原始像素尺寸（如width="1920" height="1080"），否则浏览器无法预知尺寸，导致加载时布局偏移（cls）；二者须为纯数字像素值，不支持单位或百分比，且需保持原图宽高比以避免失真。
必须同时写 width 和 height，且值为图片原始像素尺寸（如 width="1920" height="1080"），否则浏览器无法推算宽高比，CLS 仍会发生。
为什么只写一个属性或留空会触发 CLS
浏览器解析 HTML 时，若 <img> 缺少 width 或 height，就按 0×0 占位；等图片加载完成、尺寸确定后，再重排布局——下方文字/按钮会突然下移，这就是 CLS 的直接来源。只写 width="640" 不写 height，部分浏览器（尤其旧版 Safari 或 SSR 渲染环境）可能忽略比例推算，结果仍是 0 高度占位。
- 常见错误现象：
<img src="a.jpg">或<img src="a.jpg" style="max-width:90%">—— 两者都无效 - 真实使用场景：服务端渲染（SSR）、静态站点生成（如 Hugo/Jekyll）、Lighthouse 审计强制要求
- 性能影响：CLS 偏高会导致 Lighthouse “最佳实践”评分掉档，SEO 排名间接受损
width 和 height 的值怎么填才被浏览器认可
这两个属性不是 CSS，是 HTML 原生属性，规范要求必须是纯数字（无单位、无百分号）。浏览器靠它们反推 aspect-ratio，而不是直接用于显示缩放。
- 正确写法：
width="800" height="600"（对应一张 800×600 的图） - 错误写法：
width="800px"、width="100%"、height="auto"—— 浏览器会忽略或解析失败 - 比例不对的后果：比如原图 16:9 却写
width="800" height="500"，图片会被拉伸，且宽高比失真，CSSheight: auto也无法挽救
响应式场景下如何配合 CSS 使用
HTML 属性负责“告诉浏览器比例”，CSS 负责“控制实际显示尺寸”。二者分工明确，不能互相替代。
- 推荐组合：
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="">+img { width: 100%; height: auto; } - 父容器需有明确宽度（如
max-width: 768px），否则width: 100%无意义 - 避免用
height: 0; padding-top: 56.25%这类 hack 方案——它依赖 JS 或 CSS 计算，首次渲染时仍可能抖动 - 现代替代方案（Chrome 88+ / Firefox 89+）：
img { aspect-ratio: 16 / 9; width: 100%; height: auto; }，但必须保留 HTMLwidth/height作为降级兜底
srcset 和 sizes 一起用时容易漏掉的关键点
很多人加了 srcset 就以为尺寸问题解决了，其实反而更危险：浏览器可能先按默认尺寸（如视口宽度）占位，等 srcset 解析完再调整一次，造成两次 layout shift。
- 必须配对使用：
<img src="small.jpg" srcset="large.jpg 1920w, medium.jpg 960w" sizes="(min-width: 960px) 960px, 100vw" style="max-width:90%" style="max-width:90%" alt=""> -
width/height应取最大分辨率图的原始尺寸（不是当前设备选中的那张） - 如果图库自动压缩导致原始尺寸变化（如 CMS 重采样），
width/height必须同步更新，否则比例错乱
最常被忽略的一点：即使你用了 aspect-ratio CSS，也得保留 HTML 的 width 和 height。因为 Safari 15.4 之前、部分邮件客户端、以及所有 SSR 环境，根本不识别 aspect-ratio，全靠这两个属性兜底。不写，就是把 CLS 风险主动交出去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
