Flex布局下img被拉伸或压缩的根本原因是默认flex-shrink: 1、未设稳定尺寸基准且align-items: stretch在交叉轴强制撑开；需组合使用flex: 0 0 auto、width: auto、height: auto、min-width: 0及object-fit，并确保img为直接flex item。
Flex布局下img被拉伸或压缩，不是浏览器“抽风”，而是默认弹性行为在起作用：它既没被禁止收缩（flex-shrink: 1），又没被赋予稳定尺寸基准，还常被align-items: stretch在交叉轴上强行撑开。
为什么align-items: stretch会让图片变高
当父容器是display: flex且flex-direction: row（默认）时，交叉轴是垂直方向。align-items: stretch（Flex 默认值）会强制所有子项（包括img）拉伸填满容器高度。哪怕图片原始高只有 60px，父容器设了height: 200px，它也会被硬拉到 200px——宽高比直接崩坏。
- 这不是对齐问题，是尺寸劫持；改
align-items: flex-start或center只是让图片“不被拉”，但不解决主轴（水平）方向可能的压缩 - 若父容器是
flex-direction: column，交叉轴变成水平方向，此时align-items影响的是宽度，不是高度 -
align-self只对直接flex item生效；如果img包在<div>里再进 Flex 容器，align-self就完全无效
为什么flex-shrink: 0单独加也没用
flex-shrink: 0确实能阻止压缩，但它不定义尺寸起点。如果没配flex-basis或width，浏览器 fallback 到flex-basis: 0px，图片就坍成一条线；如果只写flex-basis: 100%，又可能按父容器宽度强行拉宽，高度却没约束，照样变形。
- 可靠写法是
flex: 0 0 auto，等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto，锚定图片固有尺寸 - 必须显式加
width: auto; height: auto，否则某些 CSS 重置或框架样式会覆盖 intrinsic size - 在嵌套 Flex 中，
min-width: 0常比flex-shrink: 0更底层有效——它切断了默认min-width: auto对替换元素的保护
object-fit为什么有时像没生效
object-fit只控制“图片内容怎么塞进盒子里”，但前提是盒子得先稳住形状。如果img本身已被 Flex 压缩或拉伸，object-fit: cover也只是在扭曲的框里裁图。
立即学习“前端免费学习笔记（深入）”；
- 生效硬前提：必须有明确宽高，比如
width: 100%; height: 100%或width: 100%; height: auto；写width: 100%却不设height，object-fit就失去参考系 -
object-fit只对替换元素（img、video）生效，对普通div无效 - IE 完全不支持；旧版 Safari 对
height: auto+object-fit兼容性差，需加display: block消除 inline 基线间隙
真正要检查的三个隐性干扰点
很多“图片变形”查了半天样式，最后发现是这些没显式声明的默认值在捣鬼：
-
min-width: auto（Flex item 默认）：让图片拒绝缩到比原始尺寸更小，在窄容器里直接溢出或换行 -
display: inline（img默认）：底部留 descender 空隙，干扰高度计算和对齐，必须加display: block - 父容器没设
height或flex-basis，却用了flex: 1——图片拿到的是不确定空间，浏览器按基线缩放，比例必然失真
事情说清了就结束。复杂点在于：你改的那条 CSS 到底作用在哪个节点上？是img本身，还是它外面那层div？computed 样式里flex-shrink和min-width有没有被更高优先级规则覆盖？这些才是调试时真正卡住人的地方。
