用 width 和 height HTML 属性可提前预留排版空间防跳动，但须宽高比一致以防变形；仅 img 支持，值应为无单位数字；CSS 覆盖会使其失效；现代推荐 aspect-ratio + width 替代，注意浏览器兼容性。
直接结论：用 width 和 height 属性（HTML 属性，非 CSS）能提前预留排版空间、避免图片加载时页面跳动；但必须确保值与原始宽高比一致，否则会拉伸变形。
为什么 width 和 height HTML 属性有效
浏览器解析 HTML 时，若 <img> 标签带原生 width 和 height 属性（如 width="300" height="200"），会立即按该尺寸预留布局空间，哪怕图片还没加载完成。这是 HTML 规范定义的行为，不依赖 CSS 或 JS。
- 只对
<img>元素生效，<picture>或<source>不支持 - 值可以是纯数字（像素）或带单位的字符串（如
"50%"），但浏览器只接受无单位数字作为有效 layout hint —— 即推荐写width="300"，而非width="300px" - 如果只设一个属性（比如只写
width），浏览器无法推算高度，仍会发生布局偏移
常见错误：CSS 覆盖导致预留失效
即使写了 HTML 的 width 和 height，一旦 CSS 中出现如下任一规则，就可能让预留空间“作废”：
-
img { width: 100%; height: auto; }—— 完全覆盖 HTML 属性计算出的 intrinsic size -
img { max-width: 100%; }且父容器窄于图片原始宽度 —— 实际渲染尺寸变小，但预留空间仍是 HTML 指定的大小，造成空白或错位 - 使用
object-fit但没配width/height——object-fit只控制内容填充方式，不提供布局占位
解决办法：用 aspect-ratio + width（CSS）替代，或确保 CSS 不强制重设 height。
现代方案：用 aspect-ratio 配合响应式宽度
当需要响应式图片又想避免跳动，推荐组合使用：
- HTML 中仍写
width和height（用于 fallback 和 SSR 场景） - CSS 中加
aspect-ratio: attr(width) / attr(height);（需配合width属性存在）或显式写死比值，例如aspect-ratio: 3 / 2; - 再配
width: 100%; height: auto;，这样既保留宽高比占位，又适配容器
注意：attr() 在 aspect-ratio 中的支持度尚不统一（Chrome ≥109 支持，Safari 16.4+，Firefox 未支持），生产环境建议用固定比值或 JS 回退。
容易被忽略的点
图片实际渲染尺寸 ≠ 预留空间尺寸，尤其在 srcset + sizes 场景下：浏览器根据设备像素比和视口宽度选图后，可能加载一张物理尺寸更大/更小的图片，但 HTML 的 width/height 仍按初始值预留 —— 这会导致模糊或留白。此时真正可靠的方案是服务端返回图片元数据，并在 HTML 中写入对应尺寸，或用 img.decode() + 动态设置样式（适合关键首屏图）。
