align-self: center 仅控制交叉轴对齐，不阻止拉伸；防拉伸需协同 flex-shrink: 0、尺寸约束（如 width: 100%; height: auto）和 object-fit。
align-self: center 为什么不能防拉伸
它只控制交叉轴对齐位置，不干预图片宽高计算或缩放逻辑。父容器是 flex-direction: row 时，align-self: center 仅让图片在垂直方向居中，但水平方向仍受 flex-shrink: 1（默认值）压缩，或被 width: 100% 拉宽——变形照旧。
常见假象：加了 align-self: center 后图片“看起来没那么撑”，其实是垂直居中了，宽度可能已失真；若父容器设了 height: 200px 且没配 object-fit，这个属性根本不管高度拉伸。
- 它对非直接 flex 子项无效（比如图片包在
<div> 里再进 flex 容器） <li>DevTools 中常发现 <code>align-self显示为auto，说明被更高优先级规则（如全局重置）覆盖 - 在
flex-direction: column下，align-self: center控制的是水平居中，不是垂直 -
flex-shrink: 0：关闭 flex 自动压缩，这是底线；但必须配合width或flex-basis，否则浏览器 fallback 到width: auto，无法锁定比例 -
width: 100%; height: auto：确保按固有比例渲染，避免height: 100%强制拉高 -
object-fit: cover或contain：控制图像如何填入已确定的盒模型；没前两步，object-fit就是空转 - 必须显式设置
width和/或height（哪怕用height: auto或aspect-ratio: 16 / 9） - 别写
width: 100%; height: auto;配object-fit——height: auto让容器高度不可控，object-fit失去参考系 -
display: block要加上，否则<img alt="CSS Flex布局下如何防止图片被拉伸变形_通过align-self:center或object-fit" >作为 inline 元素会留出 descender 空间，干扰对齐和高度计算 - IE 完全不支持
object-fit，需降级方案（如background-image+padding-top占位） -
min-height: 0：align-items: stretch会劫持min-height，设成0才能切断它对 aspect-ratio 或内容高度的影响 -
vertical-align: middle或display: block：解决 inline 基线对齐导致的底部留白，否则align-items: center看起来“没居中” - 嵌套 flex 时，外层
align-items可能被内层align-self覆盖，要用 DevTools 逐层检查 computed 值 - 响应式断点中，
align-items最容易被媒体查询悄悄覆盖，尤其在使用 CSS-in-JS 或 Tailwind 时
真正起作用的组合：flex-shrink + 尺寸约束 + object-fit
防拉伸要分三层协同：外框不收缩、尺寸有基准、内容不拉伸。单改 align-items 或 align-self 是绕开问题，不是解决。
安全写法：img { flex-shrink: 0; width: 100%; height: auto; }；更稳写法是用包裹层：<div style="flex-shrink:0; width:80px; height:80px;"><img src="x.jpg" style="max-width:90%" alt="CSS Flex布局下如何防止图片被拉伸变形_通过align-self:center或object-fit" ></div>
立即学习“前端免费学习笔记（深入）”；
object-fit 生效的硬性前提
object-fit 只对替换元素（<img alt="CSS Flex布局下如何防止图片被拉伸变形_通过align-self:center或object-fit" >、<video></video>）生效，且必须有明确的宽高基准才能工作。没有尺寸约束时，它形同虚设。
容易被忽略的隐性干扰项
很多“图片被拉伸”的案例，根源不在对齐属性，而在弹性算法隐式施加的约束。调试时容易漏掉这些点：
真正要动的往往不是 align-self，而是子元素自身的弹性行为和尺寸锚点——拉伸是 flex 主动压缩的结果，不是图片“想变”。
