Flex容器中图片拉伸变形的根源是align-items: stretch在交叉轴上强制撑高图片；设为flex-start仅避免拉伸但未解决宽高比失真，需配合object-fit、flex-shrink: 0和min-height: 0等属性才能真正防变形。
Flex容器中图片拉伸变形，根本不是图片自己“想变”，而是align-items: stretch在交叉轴上强行撑高它——设成flex-start只是绕开了问题，但不等于解决了底层逻辑。
为什么align-items: flex-start能“止痛”但不治本
当flex-direction: row（默认）时，交叉轴是垂直方向。align-items: stretch会让所有子项（包括img）拉伸填满父容器高度；而flex-start只是让它们顶部对齐、保持自身高度，从而避免被拉高。但它不管图片宽高比是否失真，也不解决父容器高度约束带来的渲染冲突。
-
img没设height或max-height时，flex-start下它可能仍按原始尺寸渲染，导致溢出或错位 - 如果父容器有
height: 200px，而图片原始高只有80px，flex-start后它就真的只占80px，下方留白——这不是“修复”，是“放弃拉伸” - 多个图片高度不一致时，
flex-start会让它们顶部对齐，但视觉上依然参差，尤其在卡片布局里显得松散
img必须配合object-fit才能真正防变形
仅改align-items无法约束图片自身的缩放行为。浏览器对替换元素（如img）的默认渲染规则是：无明确height时按原始比例，但一旦父容器施加弹性约束，它就容易“妥协”。object-fit才是控制图像如何适应容器的开关。
-
object-fit: cover：裁切保比例，适合头图、封面类场景 -
object-fit: contain：完整显示，留白可接受，适合图标、产品图 - 必须搭配显式宽高或
width: 100%才生效，否则object-fit无作用域 - 别忘了
height: auto——否则object-fit在某些旧版 Safari 中会失效
真正要动的往往不是align-items，而是子元素的弹性属性
很多“图片被拉伸”的案例，根源是子项没锁住自身尺寸弹性。Flex算法会优先响应flex-shrink和min-height等隐性约束，而不是你写的height。
立即学习“前端免费学习笔记（深入）”；
- 给
img加flex-shrink: 0，防止它被压缩或拉伸干扰原始比例 - 用
min-height: 0替代height——这是切断stretch劫持aspect-ratio或内容高度的关键一环 - 若父容器是
flex-direction: column，注意交叉轴变成水平方向，此时align-items影响的是宽度对齐，不是高度 - 嵌套Flex时，外层
align-items可能被内层align-self覆盖，调试时用浏览器开发者工具逐层检查计算值
响应式场景下align-items最容易被悄悄覆盖
媒体查询、UI库工具类、CSS-in-JS动态注入，都可能在某个断点下把align-items: stretch干掉，而你只看到图片突然拉伸——其实不是它变了，是规则被替换了。
- 不要依赖“没写就是默认”，显式写
align-items: stretch反而更可控（尤其在复杂项目中） - 检查
@media块里有没有漏掉align-items重置，比如只写了flex-direction: column却忘了补上align-items: stretch - Bootstrap 5 的
.d-flex类自带align-items: stretch，但如果你自定义了.card样式并写了align-items: center，它就会优先生效 - 用
outline: 1px solid red临时标出img真实渲染区域，比靠眼猜快十倍
最常被忽略的其实是图片父容器本身有没有参与高度计算——比如img外面包了一层div，而这个div用了position: absolute，那整个Flex容器就“看不见”这张图的高度了。
