图片在flex容器中被拉宽/压扁，根本解法是同时设置flex-shrink: 0和min-width: 0（主轴为行）或min-height: 0（主轴为列），防止flex强行缩放其盒模型；object-fit仅控制内容填充方式，无法修复已被拉伸的盒子尺寸。
Flex容器里图片被拉宽/压扁，怎么锁住宽高比
Flex默认会拉伸子项以填满交叉轴（比如flex-direction: row时的height），图片作为替换元素，一旦没设明确尺寸，就会被align-items或flex属性强行变形。核心解法不是“阻止拉伸”，而是让图片自己「拒绝被拉」——靠min-width/min-height和flex-shrink配合。
-
img元素加flex-shrink: 0：防止它在空间不足时被压缩（这是最常漏掉的一条） - 同时设
min-width: 0或min-height: 0（取决于主轴方向）：否则flex-shrink: 0可能失效，因为Flex项默认min-width: auto会撑开容器 - 如果图片需响应式，用
width: 100%+height: auto，但必须确保父容器有明确宽度，且不被Flex交叉轴干扰
为什么object-fit不能解决拉伸问题
object-fit只控制图片在「已有盒模型内」如何填充，不改变盒子本身尺寸。如果Flex已经把img的盒模型拉成200×300，object-fit: cover只是在里面裁剪显示，原始比例依然丢了——你看到的是被扭曲后又裁掉一部分的图。
- 常见误用：
img { object-fit: contain; width: 100%; height: 100%; }→ 这会让图片填满整个Flex项盒子，而盒子早被Flex拉变形了 - 正确思路：先用
flex-shrink: 0和min-size保住房子（盒子）不被拉，再用object-fit装修里面 - 注意兼容性：
object-fit在IE全系不支持，如需兼容，得回退到background-image方案
用background-image替代<img>的适用场景
当图片纯作装饰、无需语义化、也不需要SEO或可访问性（如图标、Banner图），background-image反而是更稳的选择——它天然不受Flex拉伸影响，尺寸完全由CSS盒模型控制。
- 关键写法：
background-size: contain; background-repeat: no-repeat; background-position: center; - 必须设
height（哪怕min-height），否则背景区域高度为0，图就看不见 - 如果要响应式缩放，用
background-size: cover+padding-top技巧维持宽高比（例如padding-top: 56.25%对应16:9） - 缺点：无法懒加载（
loading="lazy"）、不能右键保存、屏幕阅读器不可读
Chrome/Firefox中img在Flex里的行为差异
Firefox对flex-shrink: 0更严格，Chrome有时会“悄悄”压缩图片即使写了flex-shrink: 0，尤其当父容器align-items: stretch且未设height时。
- 跨浏览器稳定写法：
img { flex: 0 0 auto; }（等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto;） - 如果图片仍被压扁，检查父级是否用了
align-items: stretch（Flex默认值），临时加align-items: flex-start可快速验证是否是它导致 - DevTools里看Computed面板，重点盯
flex-basis值——如果是auto但实际显示为0px，说明min-width/min-height没生效
object-fit怎么写，而是忘了flex-shrink: 0和min-width: 0必须一起上，少一个，Flex就照拉不误。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
