如何指定图片显示宽度_width与height属性来预留排版空间

用 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() + 动态设置样式（适合关键首屏图）。