object-contain和object-cover本身防变形，但必须配合显式宽高或aspect-ratio约束及flex行为修正（如align-items: stretch）才生效；失效主因是容器无确定尺寸，导致浏览器无法计算缩放基准。
object-contain 和 object-cover 本身不导致变形，它们是防变形的；但单独加无效——必须配合容器尺寸约束和 Flex 行为修正，否则浏览器连“填什么框”都不知道。
为什么 object-contain 加了还是拉伸或留白异常
根本不是类写错了，而是它没作用对象：object-contain 只在图片有明确宽高（或被父容器严格限制出可用空间）时才生效。常见失效点：
- 父容器没设
w-full或固定宽度，aspect-ratio失效，object-contain失去参照基准 - 图片套在 Flex 容器里，但没加
max-w-none—— Tailwind 默认的max-w-full会锁死宽度，导致内容被截断或比例错乱 - 同时写了
h-48和h-auto（比如 JS 动态插入），后者覆盖前者，高度塌陷，object-contain在“零高度”里无从缩放 - Safari 旧版本（aspect-ratio，若仅靠
aspect-video而没 fallback，容器实际无高度
flex: 0 0 auto 是防止压缩的底线，不是可选项
Tailwind 没直接提供 flex: 0 0 auto 的工具类，得手动加或用插件。只写 shrink-0（即 flex-shrink: 0）远远不够：
- 省略
flex-basis等价于flex-basis: 0，图片坍缩成一条线 -
flex-basis: 100%会按父容器宽度算，若父容器高度未约束，纵向照样塌陷 - 必须显式声明
width: auto; height: auto，否则框架重置样式（如 Preflight）可能覆盖 intrinsic 尺寸 - 在
flex-direction: column容器中，flex-basis控制的是高度，此时要同步检查max-height和object-fit配合
嵌套 Flex 中图片变细线？查 min-width: 0
多层 Flex 嵌套（如卡片 → 内容区 → 图片区）时，图片常被压成竖线或加载后闪动。这不是 object-fit 失效，而是浏览器默认 min-width: auto 拒绝把替换元素缩太小。
- 必须在
img或其**直接父容器**上加min-w-0（即min-width: 0） - 典型安全组合：
class="w-full h-full object-contain min-w-0 shrink-0"，再补一句style="width: auto; height: auto;"更稳 - 用 DevTools 检查 computed styles，确认
flex-shrink真的是0，且父元素display确实是flex - React/Vue 动态加载时，首屏占位为 0，光靠 CSS 不够，得预设
aspect-[16/9]或用loading="lazy"+decoding="async"
IE 兼容和 Safari 旧版 fallback 怎么写
object-fit 在 IE 完全不支持，iOS Safari aspect-ratio 支持弱。不能只靠一个方案：
- 基础保底：
class="block w-full h-full"+style="background-image: url(...); background-size: contain; background-repeat: no-repeat;" - 用
@supports not (object-fit: cover)包裹 fallback 规则，避免现代浏览器重复计算 - 别丢语义：保留
img标签作为主结构，用sr-only隐藏备用图，或双写src和style.backgroundImage - 旧 Safari 还可能忽略 inline 元素的
object-fit，加block类确保渲染层级正确
真正容易被忽略的，是图片是否作为**直接 flex item**、父容器是否有**隐式嵌套 flex**、以及 SSR 首屏时 img 的 clientHeight 是否为 0 —— 这些地方一漏，所有 CSS 都白配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
