图片在flex容器中变形的根源是align-items: stretch默认拉伸，解决需三步：设align-items为flex-start等、用max-width: 100%; height: auto保持比例、加min-width: 0防收缩塌缩。
flex容器里图片变形？先关掉align-items的默认拉伸
默认情况下，flex容器的align-items: stretch会让子元素（包括<img alt="css如何在flex中让图片按比例缩放_保持宽高比自适应" >）在交叉轴方向强行撑满——哪怕图片本身有宽高比，也会被垂直拉伸变形。这不是图片的问题，是flex布局的默认行为。
解决方法很简单：显式设置align-items: flex-start（或center、baseline），让图片按自身尺寸渲染，不再被强制拉伸。
- 如果flex主轴是水平（
flex-direction: row），交叉轴就是垂直方向，此时align-items控制垂直对齐方式 - 如果主轴是垂直（
flex-direction: column），交叉轴变成水平，这时要留意justify-content是否在主轴方向过度约束了宽度 - 别依赖
height: 100%或flex: 1直接作用在<img alt="css如何在flex中让图片按比例缩放_保持宽高比自适应" >上——这会破坏固有宽高比
图片本身怎么保持宽高比？用max-width + height: auto
<img alt="css如何在flex中让图片按比例缩放_保持宽高比自适应" >标签天生支持按比例缩放，前提是别锁死两个尺寸。最稳妥写法是：
img {
max-width: 100%;
height: auto;
}这条规则的意思是：宽度最多占满父容器，高度自动按原始比例计算。它兼容所有flex场景，且不需要JS干预。
立即学习“前端免费学习笔记（深入）”；
- 不要写
width: 100%; height: 100%——这等于强制拉伸 - 避免只设
width: 100%却不设height: auto，某些旧版浏览器可能保留原始高度导致溢出 - 如果图片是响应式背景图，那就该用
background-size: contain，而不是<img alt="css如何在flex中让图片按比例缩放_保持宽高比自适应" >标签
flex子项被flex-shrink压缩？加min-width: 0防图片塌缩
当父容器空间不足时，flex默认允许子项收缩（flex-shrink: 1）。对图片来说，这可能导致max-width: 100%失效——因为收缩逻辑会先压窄元素盒模型，再应用max-width，结果图片被“挤扁”。
解决方案是在图片上加min-width: 0（或更通用的min-width: 0; min-height: 0）：
img {
max-width: 100%;
height: auto;
min-width: 0;
}-
min-width: 0不是为了设最小宽度，而是告诉flex：“这个元素可以安全地收缩到0，别按内容撑开” - 这个技巧也适用于
<video></video>、<iframe></iframe>等替换元素 - 如果不加，某些复杂嵌套flex中，图片可能突然变细长或消失——实际是被压缩到极小宽度后，
height: auto失去参照
需要等比例占满容器？用object-fit替代缩放逻辑
如果目标不是“按比例缩小”，而是“等比例填满指定区域（裁剪或留白）”，就该放弃max-width方案，改用object-fit：
img {
width: 100%;
height: 200px; /* 固定容器高度 */
object-fit: cover; /* 或 contain / fill / scale-down */
}-
object-fit: cover→ 等比缩放并裁剪，适合封面图 -
object-fit: contain→ 等比缩放并完整显示，留白由align-self控制 - 注意：
object-fit只对替换元素（<img alt="css如何在flex中让图片按比例缩放_保持宽高比自适应" >、<video></video>）有效，且IE不支持 - 若需IE兼容，得回退到
background-image+background-size方案
图片在flex里保持宽高比，本质是三件事：关掉交叉轴拉伸、放开高度自动计算、防止flex收缩误伤。最容易被忽略的是min-width: 0——它不常出现在教程里，但在真实项目嵌套中，往往是图片突然失真的唯一原因。
