仅设 height 属性会导致图片失真和布局跳动；必须配合 width 保持比例，或用 CSS 的 height + width: auto 实现等比缩放。
height 属性能设固定像素高度，但单独用它风险很高——浏览器会强行拉伸或压缩图片，极易失真，且可能引发布局跳动（CLS）。
只写 height="200" 会发生什么
浏览器会按你写的像素值强制渲染高度，同时**忽略原始宽高比**，自动缩放宽度来填满容器（或按父容器宽度撑开），结果常是横向拉伸/挤压变形。尤其当原始图是竖构图（比如 400×800），你设 height="200"，宽度可能被算成 100px，图就细长诡异。
- 不写
width时，height单独生效，但宽度由浏览器“猜”——它不会保比例，而是按当前上下文（如父容器宽度、行内流）决定 - 如果父容器没设宽，
height="200"可能导致图片宽度溢出视口 - 服务端渲染（SSR）或爬虫看到这个
height，会当作初始占位尺寸，但实际加载后尺寸突变，触发 CLS
想固定高度又不拉伸？必须配 width 或换 CSS
真正可控的固定高度方案只有两种：
- 同时写
width和height，且确保两值严格符合原图比例（比如原图 1200×600，你就写width="400" height="200"）——否则就是硬拉伸 - 改用 CSS：
style="height: 200px; width: auto;"，这是唯一能「固定高度 + 等比缩放宽度」的安全写法 - 若需响应式，用
style="max-height: 200px; width: auto; height: auto;"，配合object-fit: contain更稳妥
height 属性的单位和兼容性陷阱
HTML5 中 height 值**必须是纯数字**，单位隐含为像素；写成 height="200px" 或 height="20rem" 会被浏览器完全忽略，退化为默认尺寸（通常是原图大小）。
立即学习“前端免费学习笔记（深入）”；
- 百分比写法（如
height="50%"）在 HTML 属性中已废弃，仅部分旧浏览器支持，不可靠 -
height属性在现代框架（React/Vue）中可能被 hydration 覆盖，CSS 方案更稳定 - 如果你用的是
srcset或picture，height仅作 SSR 占位，最终渲染以 CSS 为准
真正要固定高度还保持可用性，别碰单个 height 属性——要么双属性配准比例，要么直接上 style="height: Xpx; width: auto;"，后者才是现在最省心、最不容易翻车的做法。
