object-cover加了没反应的根本原因是父容器缺乏明确宽高约束；必须配合relative、overflow-hidden、absolute inset-0及固定尺寸或aspect-ratio，图片自身需设w-full h-full且避免max-w-full冲突。
object-fit 和 object-position 类在 Tailwind 中必须搭配显式尺寸约束才生效，单独加 object-cover 几乎总失效。
为什么 object-cover 加了没反应？
根本原因是图片父容器没有明确宽高——object-fit 是“如何填满一个框”，但浏览器不知道框在哪。Tailwind 默认只提供 object-contain、object-cover、object-fill、object-none、object-scale-down 这 5 个类，它们不自带尺寸逻辑。
- 父容器是
div且没设h-48、aspect-video或aspect-[16/9]，图片就按原始尺寸渲染，裁剪无从谈起 -
<img>默认是内联元素，需加block或inline-block才响应object-fit - Flex/Grid 容器中子项默认
min-width: auto，可能撑开父容器，导致裁剪区域溢出 - 用了
max-w-full或max-h-full会覆盖h-full，直接破坏裁剪前提
怎么让不同比例图统一显示为 16:9 且关键区域居中？
三层控制缺一不可：容器定型 + 图片铺满 + 裁剪对齐。最简稳解是用 object-cover 配合绝对定位结构。
- 父容器加
relative w-full aspect-video（v3.4+）或aspect-[16/9]（旧版），并确保有宽度来源（如w-full） - 图片加
absolute inset-0 h-full w-full object-cover object-center，inset-0确保贴边，object-center对齐中心（人脸常用） - 若需关键区域偏上（比如避免切掉头顶），换
object-top；偏左用object-left - 避免在图片上同时写
max-w-full，它会让w-full失效，裁剪逻辑崩溃
背景图的 background-position 怎么用才可靠？
单写 bg-center 很可能没效果，因为位置偏移必须和 background-size、background-repeat 协同生效。
- 必须组合使用：
bg-no-repeat bg-cover bg-center—— 缺任一都可能平铺或拉伸 - 自定义坐标用任意值语法：
bg-[50px_30px]（注意下划线，不能空格），支持%、px、rem - 如果坐标来自用户输入（如 CMS 后台），必须校验格式，禁止拼接未过滤字符串，否则有 XSS 风险：
bg-['"]onerror=alert(1)//']可触发执行 - 路径必须相对 HTML 文件，不是 CSS 文件；推荐放
public/下，用url('/img.png')，别用../跳级
响应式图片排版不能只靠 Tailwind
Tailwind 不管资源加载、DPR 适配或布局偏移（CLS），这些全由 HTML 层决定。仅加 max-w-full h-auto 是典型误区。
-
<img>必须带原生width和height属性，防止布局抖动（CLS） - 要实现视口适配，得用
<picture></picture>+srcset，Tailwind 只负责样式约束（如w-full） -
object-fit在响应式断点下容易失效，因为aspect-ratio值可能被覆盖，建议用lg:aspect-[4/3] md:aspect-video显式声明 - 浮动图文混排（
float-left）仍需手动清浮动，Tailwind 没内置clearfix，after:clear-both是更可控的方案
真正卡住人的地方，往往不是类名记错，而是忘了父容器有没有宽高、图片是不是块级、路径相对谁、以及 background-image 加载失败时连 fallback 都没留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
