固定高度、宽度自适应的本质是「容器定高 + object-fit 控制填充」，而非仅设 height；单独设置 height 会破坏宽高比，必须配合 width: 100%; height: 100%; object-fit: cover/contain 或 aspect-ratio 实现比例锁定。
固定高度、宽度自适应，本质是「强制高度 + 宽高比锁定」，但浏览器不会自动推算宽度——必须靠 height 和 width: auto 配合，或用 object-fit + 固定容器来间接实现。纯靠 height="200" 或 height: 200px 会拉伸变形，这不是 bug，是默认行为。
为什么只设 height 会导致图片被拉宽/压扁
浏览器对 <img> 的默认渲染逻辑是：若同时指定 width 和 height（无论属性还是 CSS），就按这两个值强行缩放，完全忽略原始比例。只设 height 而不控制 width，等价于让宽度“自由撑开”，结果就是失真。
- HTML 属性写法：
<img src="a.jpg" style="max-width:90%">→ 宽度由原始图宽决定，高度被强制压到 200px，比例崩坏 - CSS 写法：
img { height: 200px; }→ 同样，宽度保持原始像素值，不缩放，大概率溢出或错位 - 正确思路：固定高度只是目标，真正要控制的是「容器高度」+「图片如何填满它而不变形」
用 object-fit + 固定容器高度实现「视觉上固定高、宽度自适应」
这是最可控、语义最清晰的方案，尤其适合卡片头图、列表项缩略图等场景。关键不是调 <img> 本身尺寸，而是把它放进一个有明确 height 的盒子，再用 object-fit 控制填充方式。
- 给父容器设固定高度，比如
height: 160px，并加overflow: hidden（防裁剪溢出） -
<img>设width: 100%; height: 100%，再加object-fit: cover（裁剪填满）或object-fit: contain（等比留白） - 旧版 iOS Safari 需补前缀：
-webkit-object-fit: cover - IE 完全不支持
object-fit，如需兼容，得用 background-image 替代<img>
div.img-wrapper {
height: 160px;
overflow: hidden;
}
div.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-object-fit: cover;
}
用 CSS aspect-ratio 搭配 height 实现响应式固定高宽比
如果目标是「高度固定、宽度随容器变，但始终维持某比例」，比如 16:9 的横幅图，aspect-ratio 是更现代的解法。它不依赖图片原始尺寸，而是定义容器自身的宽高关系。
- 给
<img>直接设height: 200px; aspect-ratio: 16 / 9;→ 浏览器自动算出宽度为 ~355.56px - 搭配
width: 100%可让它在小屏下继续收缩：width: 100%; height: 200px; aspect-ratio: 4 / 3; - 注意：
aspect-ratio在 Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版 Safari 需用 padding-top 技巧兜底 - 这个方案下，图片仍可能被拉伸——所以务必同时加
object-fit: cover或contain
max-width: 100% + height: auto 不适用于「固定高度」需求
很多人误以为 img { max-width: 100%; height: auto; } 能实现固定高，其实它只保证「不超父容器宽」，高度永远是按比例推算的。你设了 height: 200px，它就会覆盖 height: auto，回到拉伸老路。
- 若父容器高度是
200px，但没设overflow: hidden，图片可能直接撑破容器 - 若想让图片在固定高容器里「刚好显示全且不拉伸」，唯一可靠路径是：容器定高 +
object-fit: contain+width: 100%; height: 100% - 别指望
srcset或sizes解决固定高问题——它们只影响加载哪张源图，不影响渲染时的缩放逻辑
真正卡住人的地方，从来不是「怎么写那行 CSS」，而是没分清「控制容器」和「控制图片」的区别。固定高度是个视觉目标，但 HTML/CSS 里没有「height: 200px 且自动维持比例」这种原子操作——必须拆成容器约束 + 图片填充策略两步走。漏掉任何一环，都会在某个机型或框架下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
