图片在 Flex 布局中易变形，主因是 img 为替换元素且默认 flex-shrink:1；应结合 object-fit 控制内容适配方式，并设置明确宽高或 aspect-ratio，同时重置 flex-shrink 防止压缩。
图片在 Flex 布局中默认不会等比例缩放，常出现拉伸、裁切或溢出，核心原因是 img 元素本身是替换元素，其尺寸行为受父容器 flex 项的默认伸缩规则（flex-shrink: 1）和自身固有宽高共同影响。解决的关键在于明确控制图片的“内容呈现方式”与“容器空间分配”，而非仅靠 width/height 硬设。
用 object-fit 统一图片内容渲染模式
object-fit 是专为替换元素（如 img、video）设计的属性，它不改变图片原始尺寸，只控制图片内容如何适应其容器框。配合固定宽高的容器使用效果最佳：
- object-fit: contain —— 等比缩放，完整显示图片，留白可接受（适合图库、头像预览）
- object-fit: cover —— 等比缩放并填满容器，可能裁剪边缘（适合封面图、背景图）
- object-fit: scale-down —— 取
none和contain中更小的渲染结果，适合响应式兜底
⚠️ 注意：必须给图片或其父容器设置明确的宽高（如 width: 100%; height: 200px），否则 object-fit 无生效基准。
用 flex 属性约束图片自身伸缩行为
Flex 容器中，图片作为 flex item 默认会收缩（flex-shrink: 1），导致被强制压缩变形。需主动重置其 flex 行为：
立即学习 “ 前端免费学习笔记（深入）”；
- 禁止压缩：设置
flex-shrink: 0—— 图片保持原始尺寸或按 width/height 渲染，不随容器变窄而挤压 - 允许等比拉伸：设置
flex: 1+max-width: 100%—— 占满可用空间，但宽度不超过父容器，高度由object-fit控制 - 避免换行溢出：对图片父容器加
min-width: 0—— 防止 flex 容器因内部图片固有尺寸过大而撑宽整行
推荐组合写法（兼顾响应与等比）
以下是最常用且健壮的写法，适用于卡片、网格、轮播等场景：
.card-img {width: 100%; height: 200px; /* 设定容器高度 */ object-fit: cover; /* 等比填充，自动裁剪 */ flex-shrink: 0; /* 防止被 flex 压缩 */ display: block; /* 去除 img 默认 inline 下间距 */} .card {display: flex; flex-direction: column;}
若需图片随容器宽度自适应高度（如保持 16:9），可用 aspect-ratio 替代固定 height：aspect-ratio: 16 / 9; height: auto;，再配合 object-fit 使用。
兼容性与降级建议
object-fit 在现代 浏览器 中支持良好（Chrome 31+、Firefox 36+、Safari 10.1+），IE 完全不支持。如需兼容 IE，可改用背景图方案：
- 将图片设为
div的background-image - 用
background-size: cover / contain实现等比效果 - 配合
background-position: center居中
此时需确保该 div 有明确宽高或 aspect-ratio，并在 flex 容器中同样设置 flex-shrink: 0 防止压缩。
