flex容器中图片被拉伸的主因是align-items: stretch默认拉伸子项，且未设置object-fit；应为img设置width/height+object-fit: cover/contain来保持比例。
Flex容器中图片被拉伸的典型表现
当图片作为子元素放在 display: flex 的容器里，且父容器设置了固定高度（比如 height: 200px），而图片原始宽高比与容器不匹配时，img 元素会默认拉伸填满可用空间——尤其在 align-items: stretch（Flex 默认值）下，垂直方向强制撑高，导致变形。
为什么只改 align-items 不够
align-items: center 或 align-items: flex-start 能缓解垂直拉伸，但仅控制交叉轴对齐方式，不约束图片自身渲染行为。如果图片父容器仍有高度限制、或图片设了 height: 100%，它依然会按比例缩放失败，甚至出现空白区域或裁切异常。
-
align-items只影响子项在交叉轴上的定位，不改变子项的尺寸计算逻辑 - 图片是替换元素，默认
height: auto，但一旦父容器施加约束（如flex: 1+ 固定高度），浏览器会尝试“适配”而非“保持比例” - 真正控制图片内容如何适应盒模型的，是
object-fit
object-fit 的取值选择与实际效果
object-fit 必须作用于 img 元素本身（或其它替换元素），配合明确的宽高声明才生效。常见组合：
-
object-fit: cover：等比缩放并裁切，填满容器，适合封面图、头像——注意可能丢失边缘内容 -
object-fit: contain：等比缩放至完全可见，留白不可避免，适合图表、图标 -
object-fit: fill：强制拉伸（默认行为），不推荐 -
object-fit: scale-down：在none和contain中选更小的，适合响应式兜底
示例：
.card { display: flex; height: 200px; }
.card img { width: 100%; height: 100%; object-fit: cover; }注意：这里 width/height: 100% 是必要的，否则 object-fit 无作用范围。
容易被忽略的兼容性与嵌套陷阱
object-fit 在 IE 完全不支持，iOS Safari 旧版本（div 且该 div 没设高度，或用了 flex: 1 却没给父容器定义主轴尺寸，object-fit 仍可能失效。
- 确保图片直接父容器有明确的高度（或通过
flex-basis/min-height锚定） - 避免在图片上同时设置
max-width: 100%和width: 100%，可能触发 Safari 的尺寸重算异常 - 需要兼容 IE 时，用
background-image+background-size替代，但会失去alt和 SEO 优势
最稳妥的做法是：Flex 容器设好尺寸 → 图片设明确宽高 → 再加 object-fit，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
