Flex容器中图片变形是因align-items: stretch默认拉伸，应设align-items: flex-start或center；禁用height: 100%和flex: 1，改用max-width: 100%; height: auto; min-width: 0并配合aspect-ratio或padding-bottom占位。
Flex容器里图片被拉伸变形？关掉align-items: stretch
默认align-items: stretch会让所有子项（包括<img alt="CSS中如何让Flex布局中的图片在保持比例的同时填充容器" >）在交叉轴方向强行撑满高度，哪怕图片是16:9，也会被垂直拉伸。这不是图片问题，是Flex的默认行为。
主轴为水平（flex-direction: row）时，交叉轴是垂直方向，设align-items: flex-start或align-items: center即可让图片按自身比例渲染；若用了flex-direction: column，交叉轴变成水平，此时要检查justify-content是否过度约束了宽度。
- 别给
<img alt="CSS中如何让Flex布局中的图片在保持比例的同时填充容器" >加height: 100%或flex: 1——这会破坏固有宽高比 - 如果父容器高度不确定，
height: 100%会失效（百分比高度依赖明确的包含块高度） - 用
object-fit: contain配合width: 100%; height: 100%仅在父容器有确定高度时才安全
最后一行图片突然变高？放弃flex: 1，改用calc()定宽
用flex: 1会让子项在剩余空间里强制拉伸，尤其当内容不满整行时，最后一行会被“额外分配空间”，导致高度突兀增长（俗称“底行膨胀”）。
正确做法是让每个项目有确定宽度，再靠flex-wrap: wrap自然折行。例如最多4列、间隙gap: 1vmin：
立即学习“前端免费学习笔记（深入）”；
-
width: calc((100% - 3vmin) / 4)（4项→3个间隙） - 务必加
align-content: flex-start，否则行会堆积到容器底部 -
justify-content: flex-start避免末行左右空隙不均
图片不保持16:9比例？max-width: 100% + height: auto + min-width: 0三件套
<img alt="CSS中如何让Flex布局中的图片在保持比例的同时填充容器" >天生支持等比缩放，前提是别锁死两个尺寸。但仅靠max-width: 100%; height: auto还不够——在复杂嵌套Flex中，它可能被flex-shrink压缩到极窄，导致height: auto失去参照而失效。
- 必须加
min-width: 0（或min-height: 0），告诉Flex：“这个替换元素可以安全收缩” - 现代浏览器可加
aspect-ratio: 16/9进一步约束容器比例 - 兼容性要求高时用伪元素
padding-bottom占位法（如padding-bottom: 56.25%对应16:9） - 若需裁切填充而非留白，用
object-fit: cover配合overflow: hidden，但别和height: auto混用
图片无法填满容器高度？先确认父容器有没有“高度基准”
即使写了height: 100%，若父容器没显式高度（比如height: auto或未设min-height），该百分比就等于0——这是最常被忽略的根源。
- 给直接父容器设
min-height: 200px或height: 400px，再让<img alt="CSS中如何让Flex布局中的图片在保持比例的同时填充容器" >用height: 100%才有效 - 若父容器是Flex项，确保其父级也参与高度传递（例如设
flex-direction: column并配flex: 1） - 用
flex: 1的<img alt="CSS中如何让Flex布局中的图片在保持比例的同时填充容器" >必须搭配flex-shrink: 0，否则仍可能被压缩失真
