如何让flex布局中的图片按比例自适应宽高？

本文共计1021个文字，预计阅读时间需要5分钟。

在默认情况下，使用 `flex` 布局时，容器设置 `align-items: stretch` 会使子元素（包括 `flex` 子项和 `non-flex` 子项）的交叉轴大小（通常是高度）拉伸至与容器相同。这会导致所有子元素在交叉轴方向上占据相同的空间。

解决方法很简单：显式设置align-items: flex-start（或center、baseline），让图片按自身尺寸渲染，不再被强制拉伸。

• 如果flex主轴是水平（flex-direction: row），交叉轴就是垂直方向，此时align-items控制垂直对齐方式
• 如果主轴是垂直（flex-direction: column），交叉轴变成水平，这时要留意justify-content是否在主轴方向过度约束了宽度
• 别依赖height: 100%或flex: 1直接作用在<img>上——这会破坏固有宽高比

图片本身怎么保持宽高比？用max-width + height: auto

<img>标签天生支持按比例缩放，前提是别锁死两个尺寸。最稳妥写法是：

img { max-width: 100%; height: auto; }

这条规则的意思是：宽度最多占满父容器，高度自动按原始比例计算。它兼容所有flex场景，且不需要JS干预。