height: auto在固定高容器中失效，因其依赖已知宽度反推高度；若父容器仅设height而无width/max-width参照，浏览器无法计算导致塌陷或溢出，此时应改用object-fit+显式宽高。
img 设置 height: auto 为什么在固定高容器里失效
因为 height: auto 的作用是“按原始宽高比推算高度”，前提是宽度已知且可变；一旦父容器设了固定 height（比如 height: 200px），而图片又没显式设 width 或 max-width，浏览器就无法反推——结果要么塌陷为 0，要么溢出。这不是 bug，是 CSS 计算逻辑的必然。
常见错误现象：img 在 div { height: 240px; } 里只显示一条线，或完全不渲染。
- 必须同时控制宽度行为：加
max-width: 100%或width: 100%，让浏览器有参照来反推高度 - 如果容器高度固定、宽度也固定（如卡片头像），
height: auto就不该用——改用object-fit+ 显式宽高 - 避免给
img写内联height属性，它会直接覆盖height: auto
固定高度容器中用 object-fit 替代 height: auto
object-fit 不是“让图片自适应容器高度”的替代方案，而是“在已知容器宽高的前提下，控制图片如何填充”的方案。它只在容器明确设了 width 和 height 时才生效。
例如卡片图、Banner 图这类尺寸确定的场景：
立即学习“前端免费学习笔记（深入）”；
- 写法必须包含容器尺寸：
.card-img { width: 100%; height: 240px; object-fit: cover; display: block; } -
object-fit: cover等比缩放并裁剪填满，适合封面类图片 -
object-fit: contain等比缩放并完整显示，适合说明书类图片 - 别混用
max-width: 100%和object-fit：前者防溢出，后者控填充，逻辑冲突易导致渲染异常
Flex/Grid 容器中 img 高度不收缩的真正原因
在 display: flex 或 display: grid 的父容器里，img { max-width: 100%; height: auto; } 经常失效，不是样式写错了，而是子项默认有 min-width: auto ——它会阻止图片缩小到小于其固有宽度。
典型表现：小屏下图片不随容器变窄，右侧被截断或横向滚动。
- 解决方法：给
img加min-width: 0，解除默认限制 - 更稳妥写法：
img { max-width: 100%; height: auto; min-width: 0; } - 如果父容器是
flex，还要检查是否误设了flex-shrink: 0——它会让图片拒绝压缩 - 别依赖
width: 100%：在 Flex 中它常被min-width: auto抵消，不如max-width: 100%可靠
响应式高度容器（如正文图）该用 aspect-ratio
当容器高度不能写死（比如文章配图要随文字流自然撑开），又想保持比例，现代方案是用 aspect-ratio，而不是靠 height: auto 反推。
它让容器自己维持宽高比，再把图片塞进去等比缩放：
- 写法：
.responsive-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } - 兼容性：Chrome 88+、Firefox 89+、Safari 15.4+，IE 全挂，需配
@supports回退 - 回退方案（旧浏览器）：
padding-top: 56.25%+position: absolute容器包裹img，但结构更重 - 注意：
aspect-ratio是容器属性，不是img自身样式；img仍需width: 100%; height: 100%; object-fit: cover;
真正难的不是写对一行 CSS，而是判断当前容器有没有明确宽度参照、是否处于 Flex/Grid 上下文、以及是否需要兼顾 IE ——这些条件一组合，height: auto 就可能变成“最不可靠的 auto”。
