图片在Flex容器中被拉伸的根源是未控制其缩放行为，应设置明确宽高后配合object-fit（如cover/contain）规范缩放，并用flex: 0 0 auto或align-items/justify-content精准定位内容。
图片在 Flex 容器中被拉伸，通常是因为图片默认会随容器尺寸缩放，而 Flex 的 align-items 和 justify-content 又可能加剧这种形变。解决核心是：**控制图片自身缩放行为（用 object-fit），再配合 Flex 项目的对齐方式（align-items/justify-content）来定位，而非依赖图片自动撑满**。
给图片设 object-fit 控制内部缩放
图片作为替换元素，object-fit 决定它如何适应其内容框（即图片标签自身的宽高）。必须先给图片设置明确的宽高（或至少一个方向），否则 object-fit 不生效。
-
object-fit: cover：等比缩放并裁剪，填满整个盒子，常用于头图、卡片图——保持比例不拉伸，但可能丢失边缘 -
object-fit: contain：等比缩放并完整显示，留白可接受——适合需要看清全貌的图标或示意图 -
object-fit: fill：强制拉伸填满（就是你遇到的问题根源），避免使用 -
object-fit: scale-down：在none和contain中选更小的，适合响应式兜底
Flex 容器别让图片“被拉”——限制图片尺寸
即使用了 object-fit，如果图片父容器（如 flex item）没有尺寸约束，它仍可能被 Flex 默认拉伸（尤其当 align-items: stretch 时）。需主动控制：
- 给图片本身设
width: 100%; height: 100%（配合object-fit才有意义） - 或给图片的父 flex item 设
flex: 0 0 auto，禁止它被拉伸，让它按内容尺寸收缩 - 若图片需响应式，可用
max-width: 100%; height: auto防止溢出，再叠加object-fit
用 align-items 和 justify-content 精准定位图片内容
object-fit 解决“怎么缩”，而 align-items/justify-content 解决“缩完后内容往哪摆”。例如：
立即学习“前端免费学习笔记（深入）”；
- 容器
display: flex; align-items: center; justify-content: center;+ 图片object-fit: cover; width: 100%; height: 100%→ 图片居中裁剪显示 - 想让封面图顶部对齐不裁头上方？加
align-items: flex-start，再配object-position: top -
object-position: center bottom可手动调整裁剪锚点，配合cover实现“人物脚部始终可见”等效果
常见错误组合与修正
以下写法极易导致拉伸，需避开：
- ❌ 图片无宽高 +
object-fit: cover→ 不生效，退化为原始拉伸 - ❌ Flex item 未设
flex-shrink: 0或min-width/height，在小屏下被压缩变形 - ❌ 同时设
width: 100%和height: 200px且object-fit: cover→ 强制宽高比失衡，仍可能轻微挤压（应优先用aspect-ratio或 padding-top 媒体技巧保比例）
