图片在flex中变形的根本原因是img无宽高约束，object-fit仅控制内容适应而非盒子尺寸；需显式设宽高或外包div，同时注意flex-shrink和vertical-align默认值影响。
flex容器里图片被拉伸变形，object-fit 不生效？
根本原因是弹性项（img）默认不设宽高约束，object-fit 只控制「内容如何适应」，不改变盒子本身尺寸。浏览器先按 flex 布局算出 img 的盒模型大小，再让图片内容去 fit 这个盒子——如果盒子被 flex 拉宽/拉高了，object-fit: cover 也救不回变形。
- 必须给
img显式设置width和/或height（哪怕用auto或min-content），否则它在 flex 中可能无限伸缩 - 更稳妥的做法是把
img包一层<div>，让 div 做 flex 项并设尺寸，<code>img在内部用object-fit控制渲染 - 注意
flex-shrink: 0—— 默认值是 1，图片容器可能被压缩导致object-fit失效 -
img+object-fit：保留语义（alt 文本、SEO、屏幕阅读器识别）、支持右键保存、可被 JS 获取自然尺寸（img.naturalWidth） -
div+background-image：无语义、无法被爬虫索引、不能右键另存为、JS 需要解析 CSS 或额外 data 属性才能知道原图尺寸 - 性能上没明显差异，但混合使用时容易混淆——比如误以为
background-size: cover和object-fit: cover行为一致，其实它们的对齐基准点（background-positionvsobject-position）默认不同 - 最直接解法：
img { vertical-align: top }或vertical-align: middle - 或者改 display：
img { display: block }，彻底脱离 inline 流，此时align-items才真正起作用 - 别依赖
margin: auto居中——在单行 flex 容器里它只在主轴有效，交叉轴需靠align-items或align-self - 检测支持：可用
@supports (object-fit: cover)写 CSS 降级，或 JS 判断'objectFit' in document.documentElement.style - 降级方案不是“隐藏图片”，而是用
max-width: 100%+height: auto保比例，配合overflow: hidden模拟cover效果（需父容器定高） - 注意 Safari 旧版本对
object-position解析异常，比如object-position: 50% 20%可能偏移不准，建议用像素值或测试真机
object-fit 在 flex 布局中和 background-image 的关键区别
很多人想用背景图替代 img 来规避问题，但这是两条技术路径：object-fit 作用于替换元素（如 img、video），而 background-size 作用于背景层，语义和可访问性完全不同。
Flex 容器设了 align-items: center，但图片上下留白不一致？
这是 img 作为内联元素的基线对齐（baseline）惹的祸。即使容器用了 flex，img 默认仍按 inline 行为参与基线对齐，底部会留出文字下行空间（descender space）。
响应式场景下 object-fit 和 flex 组合的兼容性陷阱
object-fit 在 IE 完全不支持，Android 4.4 及更早 WebView 也不支持；flex 布局在 iOS 8–9、Android 4.4 有部分 bug（比如 flex-wrap 失效）。两者叠加时，降级策略必须明确。
立即学习“前端免费学习笔记（深入）”；
实际项目里最容易漏掉的是 flex-shrink 和 vertical-align 这两个默认行为，它们不像语法报错那样显眼，但会让图片在不同设备上表现不一——尤其当设计稿只给了固定尺寸，而你面对的是从 320px 到 4k 的各种 viewport。
