flex布局中图片变形的根本原因是flex-shrink:1与align-items:stretch共同作用导致盒子被拉伸/压缩，而非图片本身问题；解决需同时设置flex:0 0 auto和min-width:0，并配合aspect-ratio或object-fit等属性。
Flex 布局里商品图片比例不一致，根本不是图片本身的问题，而是 Flex 的默认压缩行为和尺寸推导逻辑在干扰——flex-shrink: 1 和 align-items: stretch 同时起效时，图片会被强制压窄或拉高，object-fit 完全救不回来。
为什么加了 object-fit: cover 图片还是变形？
因为 object-fit 只管“内容怎么塞进盒子里”，不管“盒子自己有没有被 Flex 拉扁”。Flex 默认给子项设 flex-shrink: 1，图片作为替换元素，在宽度不足时会无条件缩窄；同时父容器若设了固定高度 + align-items: stretch（默认值），图片又被垂直撑满。结果就是：盒子先被压扁/拉长，再在扭曲的盒子里裁图。
- DevTools 里看到
img渲染宽度远小于原始尺寸？说明它已被flex-shrink主动压缩 - 图片高度被撑到父容器高度？大概率是
align-items: stretch在作祟 - 只写
width: 100%; height: 200px;而不关flex-shrink，等于白配object-fit
flex: 0 0 auto 必须写全，不能省略任何一部分
flex: 0 0 auto 是唯一能稳住图片固有尺寸的写法，它等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，三者缺一不可：
-
flex-grow: 0防止图片意外拉伸占满剩余空间 -
flex-shrink: 0切断 Flex 主动压缩路径 -
flex-basis: auto让浏览器按图片原始尺寸或 CSS 宽高推导基准；写成flex: 0 0相当于flex-basis: 0px，图片直接坍缩成一条线
别用 flex-shrink: 0 单独声明——它依赖 flex-basis 计算，漏掉就会回退到 auto，嵌套 Flex 场景下仍可能被干扰。
响应式商品列表中保持 16:9 等比缩放的写法
现代解法优先用 aspect-ratio，但它必须和 width + object-fit 协同生效：
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
flex: 0 0 auto;
}
旧版 Safari 不支持 aspect-ratio，降级方案：
- 用
max-width: 100%; height: auto;替代固定宽高 - 必须加
min-width: 0（作用于img自身或其**直接父容器**）——否则多层 Flex 嵌套时，min-width: auto（替换元素默认值）会让图片拒绝缩小，导致布局僵死、闪动或变细成像素线 -
flex: 0 0 auto和min-width: 0必须共存，一个防压、一个允缩，缺一不可
商品卡片里图片垂直居中且不拉伸的组合
如果卡片有固定高度（比如 height: 240px），又想图片居中显示且保持比例，不能只靠 align-items: center：
-
align-items: center只控制交叉轴对齐，不阻止图片被flex-shrink压窄 - 正确写法：卡片容器设
display: flex; align-items: center; justify-content: center;，但img必须带flex: 0 0 auto+max-width: 100%; max-height: 100%+object-fit: contain - 若用
object-fit: cover，要额外加object-position: center确保重点区域不被裁掉
最容易被忽略的是：所有商品卡片的外层容器必须统一 box-sizing: border-box，并清除默认 margin/padding；否则小数计算误差会导致最后一张图掉行，尤其在 calc(33.333% - 12px) 这类写法里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
