Flex布局中图片变形主因是容器尺寸变化与图片默认缩放机制冲突，解法为用flex-basis控制容器基准尺寸、object-fit控制图片内容适配方式。
图片在 Flex 布局中变形，通常不是因为 Flex 本身“拉伸”了图片，而是图片作为替换元素，在容器尺寸变化时默认按自身宽高比缩放受限，再叠加 flex-shrink 或容器约束，就容易出现被挤压或拉伸的情况。核心解法是：**用 flex-basis 控制主轴尺寸基准，再用 object-fit 精确控制图片内容在容器内的显示方式**。
明确图片容器与图片本身的职责分离
Flex 布局作用在父容器（如 .gallery-item）上，它只负责分配空间；图片（<img alt="css弹性盒子布局内图片比例失真怎么办_使用flex basis和object fit修正" >）是否变形，取决于它如何“填充”这个分配好的空间。不能指望 Flex 自动保持图片比例，必须显式干预图片的渲染行为。
- 给图片设置
width: 100%; height: 100%是常见错误——这强制拉伸，破坏比例 - 正确做法：让图片容器有明确尺寸（通过
flex-basis或min-width/max-width），再让图片用object-fit自适应 - 示例结构：
<div class="item"><img src="..." alt="css弹性盒子布局内图片比例失真怎么办_使用flex basis和object fit修正" ></div>，样式应作用在.item和img两个层级
用 flex-basis 锁定主轴基础尺寸，避免过度压缩
flex-basis 定义了 Flex 项目在主轴方向的初始大小，它比 width 更优先参与空间计算。设为固定值（如 200px）或弹性值（如 calc(33.333% - 1rem)），可防止图片容器在空间紧张时被无限制压缩，从而为图片保留合理显示区域。
- 横向布局（
flex-direction: row）：用flex-basis控制宽度 - 纵向布局（
flex-direction: column）：用flex-basis控制高度 - 配合
flex-shrink: 0可完全禁止收缩（适合等比缩放场景）
用 object-fit 精准控制图片内容呈现方式
object-fit 是解决比例失真的关键 CSS 属性，它定义替换元素（如 <img alt="css弹性盒子布局内图片比例失真怎么办_使用flex basis和object fit修正" >、<video></video>）的内容如何适应其容器盒。需配合明确的宽高（由容器提供）才能生效。
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放并裁切，填满容器——最常用，适合封面图、卡片图 -
object-fit: contain：等比缩放并完整显示，留白——适合需要看清全貌的图标或产品图 -
object-fit: scale-down：取none和contain中更小的尺寸——适合响应式兜底 - 务必同时设置
width: 100%; height: 100%在<img alt="css弹性盒子布局内图片比例失真怎么办_使用flex basis和object fit修正" >上，否则object-fit不起作用
补充：避免常见干扰项
有些问题看似是 Flex 导致，实则源于其他样式干扰：
- 检查是否有全局重置样式设置了
img { max-width: 100% }却没配height: auto，导致纵向拉伸 - 父容器若用了
align-items: stretch（Flex 默认），而图片没有设高度，可能被拉高——此时给图片容器设height或用align-items: flex-start - 不要对
<img alt="css弹性盒子布局内图片比例失真怎么办_使用flex basis和object fit修正" >直接设flex，除非你真想让它成为 Flex 项目（通常只需容器是 Flex 项目）
