图片变形时应设 max-width: 100%、height: auto 和 flex-shrink: 0，避免固定宽高或仅靠 Object-fit；需先稳住外框尺寸，再用 object-fit 控制内容填充。
Flex容器里图片被拉宽/压扁了怎么办
flex布局默认会让子元素按主轴方向拉伸，img 作为替换元素，不设宽高时会优先按内容尺寸渲染；但一旦父容器设了 flex: 1 或 align-items: stretch，浏览器就可能强行撑开它——尤其是没设 max-width: 100% 或 height: auto 的时候。
实操建议：
- 给
img加max-width: 100%和height: auto，这是最基础的保比例防线 - 如果父容器是
display: flex且子项用了flex: 1，必须额外加flex-shrink: 0防止图片被压缩（尤其在窄屏下） - 避免对
img直接设固定width或height，除非你明确要裁切或等比缩放 - 若用
object-fit（比如object-fit: cover），注意它只控制内容填充方式，不解决外框拉伸问题——得先稳住外框尺寸
为什么 align-items: center 还是压扁图片
因为 align-items 控制的是交叉轴对齐，不影响主轴拉伸行为。真正作怪的是 flex-shrink 默认为 1，加上图片没有明确尺寸约束，Flex 就会按可用空间“分配”它的宽度，导致比例失真。
常见错误现象：img 在小屏幕中明显变宽、高度塌陷、左右有空白却仍被拉伸
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 检查父容器是否隐式设置了
flex-direction: row（默认值），此时主轴是水平方向，flex-shrink就会对宽度起效 - 给
img显式写flex-shrink: 0，或者用min-width: 0配合max-width: 100%更稳妥（防止某些浏览器对替换元素的 min-width 处理异常） - 不用
width: 100%，它会让图片强制填满容器宽度，直接破坏原始比例
用 object-fit 前必须先稳住容器尺寸
object-fit 不是万能胶——它只决定图片内容如何适应其**自身盒模型**，而这个盒模型如果已经被 Flex 拉变形，那再怎么 cover 或 contain 都只是在扭曲的画布上作画。
使用场景：需要图片裁切居中显示（如头像、卡片图），又不想用背景图
实操建议：
- 容器需有明确宽高（或至少
width+aspect-ratio），否则object-fit无从参考 - 推荐组合：
width: 100%（仅当容器宽度可控）、aspect-ratio: 4 / 3、object-fit: cover、flex-shrink: 0 - 旧版 safari 不支持
aspect-ratio，可退化为padding-top: 75%+position: relative+position: absolute布局，但复杂度陡增，慎用
React/Vue 里动态图片更易出问题
框架组件中，图片常通过 src 动态绑定，加载前占位尺寸为 0，加载后突然撑开，触发 Flex 重排；若同时用了懒加载或 SSR，首屏渲染时还可能出现闪动或错位。
性能影响：反复重排会触发 layout thrashing，尤其在列表中大量使用时
实操建议：
- 给
img设width和height属性（HTML 属性，非 css），让浏览器提前知道固有尺寸 - 服务端渲染时，尽可能传入原始宽高，生成带
width/height的img标签 - 用
loading="lazy"时，确保父容器有最小尺寸约束，否则懒加载完成前 Flex 可能把它压缩成一条线
事情说清了就结束。关键不是记住所有规则，而是每次看到图片变形，先看三样东西：flex-shrink、max-width、img 元素有没有被父级 Flex 当成“可压缩资源”——它其实只想安安静静按自己比例待着。