图片在Flex布局中比例失真是因flex-shrink:1默认压缩，解决方法是设max-width:100%; height:auto;并加flex:0 0 auto;禁止缩放。
图片在 Flex 布局中比例被破坏，通常是因为 flex-shrink: 1（默认值）导致图片被强制压缩，或未设置明确的尺寸约束。解决核心是：**限制图片宽高 + 关闭 flex 项目的收缩行为**。
给图片设置明确的宽高或最大尺寸
避免图片随容器无限制拉伸或压缩：
- 用
max-width: 100%+height: auto保持原始比例（适合响应式） - 固定尺寸如
width: 200px; height: 150px;（适合已知规格的图） - 使用
aspect-ratio: 4 / 3;（现代浏览器支持，推荐）
关闭 flex 项目的收缩和拉伸
Flex 容器默认会让子项收缩（flex-shrink: 1），这是比例失真的主因：
- 给图片加
flex-shrink: 0;，禁止压缩 - 同时建议加上
flex-grow: 0;，避免意外拉伸 - 完整写法：
flex: 0 0 auto;（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto;）
确保父容器不强制约束图片尺寸
有时问题出在父级 Flex 容器或祖先元素：
立即学习“前端免费学习笔记（深入）”；
- 检查是否误设了
min-width: 0或overflow: hidden等影响内容盒的属性 - 避免对图片父元素（如
<div>）设置过小的 <code>width或max-width - 若图片在
flex-direction: column容器中，注意align-items: stretch可能拉宽图片——可改用align-items: flex-start
推荐组合写法（直接可用）
给图片元素添加以下样式即可稳定比例：
img {max-width: 100%;
height: auto;
flex: 0 0 auto;
}
