align-self: center不能防止图片拉伸，它只控制交叉轴上的定位，不干预宽高计算或缩放；真正防变形需协同设置flex-shrink: 0、width/height约束和object-fit。
align-self: center 不能防止图片拉伸，它只控制位置，不控制缩放。 图片变形的根源是 flex-shrink 默认为 1 + 缺乏尺寸约束，不是对齐问题。加 align-self: center 后图片仍被压扁，大概率是因为你误以为它能“锁住比例”——它不能。
为什么 align-self: center 对图片变形没用
align-self 只在交叉轴上起作用，且仅影响 flex item 的**定位**，不影响其宽高计算或内部图像渲染。如果父容器是 flex-direction: row（默认），交叉轴是垂直方向，align-self: center 只会让图片上下居中，但水平方向仍由 flex-shrink 和 width 决定，该压缩还是压缩。
- 常见假象：加了
align-self: center，图片看起来“不那么撑满”，误以为有效 —— 实际只是垂直居中了，宽度可能已被压缩到失真 - 如果父容器设了
height: 200px且没配object-fit，align-self根本不干预高度拉伸逻辑 - 它对非 flex item（比如图片被包在
div里再进 flex 容器）完全无效
真正该用的组合：flex-shrink: 0 + width/height + object-fit
防挤压变形必须从三个层面协同控制：外框不收缩、尺寸有基准、内容不拉伸。
-
flex-shrink: 0：关闭 flex 自动压缩，这是底线；单写这一条常不够，因为若父容器宽度塌陷，图片仍无空间可占 -
width: auto; height: auto或width: 100%; height: auto：确保图片按固有比例渲染，避免height: 100%强制拉高 -
object-fit: cover或contain：控制图像如何填入已确定的盒模型；没有前两步，object-fit就是空转
一行可靠写法：
img { flex: 0 0 auto; width: auto; height: auto; }
其中 flex: 0 0 auto 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，明确禁用伸缩、锚定原始尺寸。
容易被忽略的兼容性与嵌套陷阱
很多项目里图片放在多层 flex 中（比如卡片 → 内容区 → 图片区），这时 flex-shrink: 0 必须加在**直接父级为 flex 容器**的那个 img 上，否则无效。
- 检查 computed styles 中
flex-shrink是否真的为 0，且父元素 display 确实是flex - 旧版 Safari（iOS 14.4 及更早）对
min-width: fit-content支持差，如需 fallback，用min-width: 1px - IE 完全不支持
object-fit，必须用background-image+background-size替代，但会丢失alt和懒加载能力 - React/Vue 动态加载图片时，初始尺寸为 0，可能导致 flex 重排闪动；建议配合
aspect-ratio或占位padding-top预留空间
事情说清了就结束。最常漏掉的是：没确认 img 是 flex 容器的直接子项，也没检查父容器是否隐式塌陷了主轴尺寸——这两个点一错，所有样式都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
