object-cover 和 object-contain 本身防失真，失效主因是容器无明确宽高或 aspect-ratio、Flex 行为未修正（如缺 min-w-0/shrink-0）、或类名冲突（如 h-auto 覆盖 h-48）。
直接说结论：object-cover 和 object-contain 本身不导致失真，它们是防失真的；真正让图片拉伸、压扁、留白异常或变成一条线的，是容器尺寸不可控、Flex 行为未修正、或类名组合冲突。
为什么加了 object-cover 还是被拉伸或裁错位置
根本不是类写错了，而是它没生效对象：这个属性只在图片有明确宽高（或父容器能推导出可用空间）时才起作用。常见失效点：
- 父容器没设
w-full或max-w-md等显式宽度，aspect-video就算写了也塌陷成 0 高度 -
img被套在flex容器里，但没加shrink-0+min-w-0—— 默认min-width: auto会把图片压成竖线 - 同时写了
h-48和h-auto（比如 JS 动态插入），后者覆盖前者，高度归零，object-fit在“零高度”里无从缩放 - 用了
aspect-[16/9]却在 Safari 15.3 及更早版本运行，该属性静默失败，且不会报错
max-w-full h-auto 和 w-full h-full object-cover 怎么选
二者解决的是不同问题，混用反而冲突：
-
max-w-full h-auto：让图片按原始比例缩放，适合图文流、博客正文图——高度随宽度自动计算，不裁切 -
w-full h-full object-cover：强制填满固定尺寸容器，适合卡片封面、轮播图——必须确保父容器有确定宽高（如aspect-video+w-full） - 错误组合：
max-w-full h-48 object-cover→max-w-full失效，h-48锁死高度，object-cover裁切逻辑被强行约束在窄高框里 - 如果图片带内联
width/height属性，会覆盖aspect-ratio，务必删掉
Flex 布局下图片变细线或闪动，怎么快速定位
这不是 object-fit 的锅，是浏览器对替换元素的默认最小尺寸限制触发的。关键检查点：
立即学习“前端免费学习笔记（深入）”；
- 在
img的**直接父容器**上加min-w-0（即min-width: 0），不是给img自己加 - 确认
flex-shrink真的是 0：只写shrink-0不够，得配合flex: 0 0 auto或显式style="width: auto; height: auto" - 多层嵌套 Flex（如卡片 → 内容区 → 图片区）时，每一层都要检查是否意外设置了
min-w-full或flex-1而没配min-w-0 - 用 DevTools 的 Computed 面板查
flex-shrink和min-width，别只看 Classes 标签页
背景图 bg-cover 没铺满、模糊或错位
bg-cover 不是独立生效的魔法类，它完全依赖容器尺寸和背景定位协同：
- 容器必须有显式高度：比如
h-64、min-h-screen或aspect-[4/3]，否则浏览器连“铺满谁”都不知道 - 避免在
bg-cover同时用bg-top或bg-left—— 定位偏移会把关键内容裁掉，优先用bg-center - 模糊大概率是原图分辨率不够：容器 1200×800，图至少要 ≥1440×960；优先用
.webp格式 - 想拉伸不裁切，别用
bg-cover，改用bg-[length:100%_100%]（Tailwind v3.2+ 支持）
最常被忽略的一点：所有尺寸类（aspect-ratio、h-*、w-*）都必须作用在**容器元素**上，而不是直接写在 img 标签上；img 自身只需负责 object-fit 和尺寸继承逻辑。
