align-self: center不能防止图片拉伸，它只控制交叉轴对齐；真正保形需组合object-fit、明确宽高约束及flex-shrink: 0，并重置min-width: 0以确保缩放正常。
align-self: center 不能防止图片拉伸，它只控制图片在交叉轴上的对齐位置。
真正起作用的是 object-fit + 尺寸约束 + flex-shrink 控制。下面分几个常见实操场景说明：
为什么 align-self: center 加了也没用
图片变形时加 align-self: center 是典型误操作。这个属性只影响子项在交叉轴（比如垂直方向）的对齐，不改变尺寸、不干预图像渲染逻辑。
- 如果父容器是
flex-direction: row（默认），交叉轴是垂直方向，align-self: center只让图片上下居中，但水平方向仍可能被flex-shrink: 1压窄或被width: 100%拉宽 - 如果父容器用了
align-items: stretch（Flex 默认值），而图片没设高度，浏览器会强制撑高它——这时align-self: center被“兜底”覆盖，根本不起效 - DevTools 里检查 computed 样式，常发现
align-self显示为auto，说明被更高优先级规则（比如全局重置）覆盖了
object-fit 必须配尺寸才生效
object-fit 不是开关，它需要明确的宽高基准才能工作。没有尺寸约束时，浏览器按图片原始 intrinsic size 渲染，object-fit 形同虚设。
- 推荐写法：
width: 100%; height: 200px;或width: 100%; aspect-ratio: 16 / 9;（现代浏览器） - 别写
width: 100%; height: auto;配object-fit——height: auto让容器高度不可控，object-fit失去参考系 - IE 不支持
object-fit，必须兼容时，改用background-image+background-size: cover+padding-top占位
防止 flex 主动压缩图片的关键是 flex-shrink: 0
Flex 默认让所有子项可收缩（flex-shrink: 1），图片作为替换元素，在窄容器里会被无差别压扁，此时 max-width: 100% 也救不了。
- 最简写法：
flex: 0 0 auto;（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto;） - 若图片嵌套在多层 flex 容器中，外层容器可能隐式设置了
min-width: auto，需额外加min-width: 0;才能让flex-shrink: 0真正生效 - 别只写
flex-shrink: 0而漏掉flex-basis：省略flex-basis（如只写flex: 0 0）等于flex-basis: 0px，图片会坍缩成一条线
响应式卡片中保比例的最小可靠组合
适用于轮播、网格、信息流等真实项目场景，兼顾现代浏览器与旧版 Safari/IE 兜底。
立即学习“前端免费学习笔记（深入）”；
- 图片自身样式：
img { max-width: 100%; height: auto; flex: 0 0 auto; min-width: 0; } - 若需裁切填满固定区域：
img { width: 100%; height: 180px; object-fit: cover; flex-shrink: 0; display: block; } - 若需保持宽高比且响应式：
.img-wrapper { aspect-ratio: 4 / 3; } .img-wrapper img { width: 100%; height: 100%; object-fit: cover; }（旧版 Safari 用padding-top: 75%+position: absolute替代）
min-width: 0 和 flex-basis 的隐式行为——它们不报错、不警告，但会让图片在嵌套 flex 或小屏下突然塌缩或溢出，得靠 DevTools 的 Layout 面板逐层检查 computed 尺寸。 
