width: 100% 单独使用会导致高度失真，必须搭配 height: auto 才能等比缩放；若父容器宽度不稳定或存在内联尺寸，需配合 min-width: 0、aspect-ratio 和 object-fit（contain/cover/none）协同控制。
width: 100% 单独使用必然导致高度失真
因为 width: 100% 只限制宽度上限，不参与高度计算；浏览器仍按图片原始尺寸渲染高度，宽高比瞬间断裂。你看到的“拉伸”或“压扁”，本质是宽度被强制缩放，而高度卡在原始像素值上没变。
常见错误写法：img { width: 100%; } —— 这行代码等价于“把图片横着压扁/拉宽，竖着保持原样”，尤其在父容器宽度远小于图片原始宽度时，失真最明显。
- 必须搭配
height: auto，让浏览器自动按比例缩放高度 - 如果父容器本身高度不可控（比如
height: auto），height: 100%会失效，结果仍是原始高度 - 内联的
width或height属性（如<img src="x.jpg" style="max-width:90%">）会直接覆盖 CSS，优先级高于max-width: 100%
height: auto 不是万能解，它依赖父容器宽度是否稳定
height: auto 的逻辑是：用当前宽度 ÷ 原图宽 × 原图高。一旦父容器宽度在布局中浮动（比如 flex 项未设 min-width: 0，或 grid 列数固定），实际渲染宽度就可能跳变，height: auto 算出来的高度也会抖动甚至归零。
- Flex 容器里，给图片加
min-width: 0，否则它默认不收缩，width: 100%形同虚设 - Grid 容器中，避免写死列数如
grid-template-columns: repeat(3, 1fr)，改用repeat(auto-fit, minmax(250px, 1fr))) - 父容器若由内容撑开（比如空 div + padding），先确保它有明确宽度上下文，否则子图片的
100%无参照物
object-fit 是控制失真的真正开关，不是可选项
即使 width: 100% + height: auto 正确，图片仍可能因容器比例和图片比例不一致而留白或裁切——这不是 bug，是预期行为。要精确控制显示效果，必须用 object-fit。
-
object-fit: contain→ 等比缩放，全部可见，可能留白 -
object-fit: cover→ 等比缩放，填满容器，可能裁边 -
object-fit: none→ 不缩放，只对齐左上角，极易失真 - 注意：
object-fit要求容器有明确宽高（比如width: 100%; height: 200px或aspect-ratio: 16/9），否则无效
宽高比失控时，优先用 aspect-ratio 而非 height 百分比
写 height: 70% 是危险操作：它依赖父容器高度，而父容器高度常为 auto，导致 70% × 0 = 0，图片高度坍缩成一条线。现代方案是甩开百分比，用 aspect-ratio 锚定比例本身。
- 直接写
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }，浏览器会自动算出对应高度 - 兼容性注意：IE 不支持，但 Chrome 88+/Firefox 89+/Safari 15.4+ 已全覆盖（2026 年可放心用）
- 如果必须兼容老浏览器，退回到容器设高 +
object-fit组合，别碰height: 70%
height: auto 看似简单，但它背后所有计算都建立在父容器宽度稳定、且无内联尺寸干扰的前提下**。一环断裂，整条链就失效——所以排查顺序永远是：检查 HTML 是否带 width/height 属性 → 查父容器宽度是否真实生效 → 确认是否在 Flex/Grid 中漏了 min-width: 0 → 最后才调 object-fit。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
