图片在flex容器中被拉伸变形的根本原因是默认flex-shrink:1与align-items:stretch共同作用，解决关键是img{flex-shrink:0;width:100%;height:auto;}，并依flex-direction调整尺寸声明。
图片在 flex 容器里被意外拉伸变形
默认情况下，img 在 display: flex 的容器中会受 align-items 和自身 flex-shrink 影响而压缩或拉伸。常见表现是：明明设置了 width: 100%，图片却高度塌陷或宽高比错乱。
根本原因不是 align-items 本身，而是它和 flex-direction: row（默认）组合时，对交叉轴（即垂直方向）的对齐行为，会触发图片的默认 flex-shrink: 1 —— 浏览器会为填满容器强行缩放图片。
-
align-items: stretch（默认值）会让图片在交叉轴上拉满，若父容器高度固定，图片就会被纵向拉伸 -
align-items: center或flex-start能避免拉伸，但仅当图片本身有明确尺寸或max-width限制时才真正生效 - 必须同时控制
flex-shrink，否则即使居中，图片仍可能被压缩（尤其在小屏或窄容器中）
给 img 加上 flex-shrink: 0 是关键一步
这是最常被忽略的修复点。flex 默认让子项可收缩，而图片没有固有块级高度约束，flex-shrink: 1 就会把它压扁。
img {
flex-shrink: 0;
width: 100%;
height: auto;
}注意：height: auto 必须写，否则 width: 100% 可能失效；flex-shrink: 0 比 min-width: 0 更直接有效——后者只影响最小尺寸计算，不阻止拉伸。
立即学习“前端免费学习笔记（深入）”；
- 如果图片需要响应式缩放但保持比例，用
max-width: 100%替代width: 100% - 若容器是
flex-direction: column，问题会出现在主轴（水平方向），此时要加flex-shrink: 0+width: auto+max-width: 100% - 不要依赖
object-fit来“修图”——它只改变绘制方式，不解决布局拉伸根源
align-items 的实际影响范围要看 flex-direction
align-items 控制的是交叉轴对齐，它的效果取决于 flex-direction：
- 当
flex-direction: row（默认），交叉轴是垂直方向 →align-items影响图片上下对齐，也间接决定是否拉伸高度 - 当
flex-direction: column，交叉轴变成水平方向 → 此时align-items: stretch会让图片宽度拉满，引发横向拉伸 -
align-items: center在两种方向下都安全，但前提是图片没被flex-shrink压缩过
所以别只调 align-items，先确认方向，再配 flex-shrink 和尺寸声明。
用 object-fit 配合 flex-shrink: 0 才算完整方案
如果图片容器尺寸固定（比如卡片头图 300×200），又想保持比例并居中显示，flex-shrink: 0 解决了拉伸，object-fit 解决了裁剪/缩放策略：
.card-img {
width: 100%;
height: 200px;
flex-shrink: 0;
object-fit: cover; /* 或 contain */
}注意：object-fit 只对替换元素（如 img、video）生效；height 必须显式设置，否则 object-fit 无作用域。
容易漏掉的是：父容器不能设 overflow: hidden 以外的溢出处理，否则 object-fit: cover 的裁剪可能被截断。
真正卡住人的往往不是 align-items 选哪个值，而是忘了 flex-shrink: 0 这个开关——它一关，图片就自由了。
