图片在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 行为：
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
禁止压缩：设置
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 下间距 */
}
<p>.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 防止压缩。
