图片高度自适应需用max-width:100%+height:auto实现等比缩放，关键要清除内联宽高属性、确保父容器有明确宽度、flex/grid中加min-width:0，并配合srcset/sizes优化加载。
图片高度自适应不是靠设 height 实现的，而是让浏览器按原始宽高比自动计算高度——关键在控制宽度上限 + 清除干扰项 + 适配容器类型。
为什么 height: auto 不生效
这行 CSS 看似简单，但失效几乎都来自外部干扰：
-
img标签上有内联width或height属性（如height="400"），会直接覆盖height: auto - 父容器没提供明确宽度参照：比如只写了
display: flex却没设width、max-width或flex-basis - 父容器是 Flex/Grid 布局时，
img默认带min-width: auto，死守原始尺寸，max-width: 100%形同虚设 - 某些框架（如 Bootstrap）全局重置了
img { max-width: none }，你的样式被覆盖
max-width: 100% + height: auto 怎么写才可靠
基础组合必须配合三要素才能稳定生效：
- 给
img写：max-width: 100%; height: auto; min-width: 0;（min-width: 0是针对 Flex/Grid 容器的必要补丁） - 确保父容器有明确宽度：比如
width: 100%、max-width: 800px，或 Flex 项上设flex: 1/flex-basis: 0 - 删掉 HTML 中所有
width=和height=内联属性；如果用到srcset，必须配sizes，否则可能加载错图导致缩放异常
固定尺寸容器里怎么让图片不拉伸
当父容器宽高都固定（比如头像框 80px × 80px），max-width + height: auto 会留白或溢出——这时 object-fit 才是正解：
- 容器必须显式设
width和height（如width: 80px; height: 80px;） -
img上写：width: 100%; height: 100%; object-fit: cover;（裁剪填满）或object-fit: contain;（等比留白） - 注意：IE 完全不支持
object-fit，需 fallback 到background-image方案；老版 iOS Safari（≤12.5）要加-webkit-object-fit: cover
想控高上限又不破坏比例怎么办
如果只要求“最多高 200px”，而不是填满容器，用 max-height 更安全：
img { max-height: 200px; height: auto; width: auto; }-
width: auto必须显式写出，否则旧版 Safari 可能默认按width: 100%计算，导致比例错乱 - 这个组合依然依赖父容器有宽度约束；若父容器无宽限制，图片仍可能横向撑破布局
真正容易被忽略的是：图片自适应从来不是单靠一个 CSS 规则就能解决的事——它是一组协作条件，缺一不可。尤其是 min-width: 0 和内联属性清理，90% 的失效案例都卡在这两处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
