object-cover不生效的根本原因是父容器缺乏明确宽高约束；必须配合relative、overflow-hidden、absolute inset-0及固定尺寸或aspect-ratio，图片自身需设w-full h-full且避免max-w-full冲突。
为什么 object-fit 类在 Tailwind 中不直接生效？
Tailwind 默认只提供 object-contain、object-cover、object-fill、object-none、object-scale-down 这 5 个类，但它们必须配合 object-position 和显式宽高才能起作用——很多人加了 object-cover 却没效果，就是因为图片父容器没设 h-48 或 aspect-square 这类尺寸约束。
- 图片本身是内联元素，默认不响应
object-fit，需加block或inline-block - 父容器若未设固定宽高，
object-cover会“覆盖”到哪去？浏览器没参照系，就退回到原始尺寸 - Flex/Grid 容器里子项默认
min-width: auto，可能撑开父容器，导致裁剪失效
怎么让不同比例图片统一显示为 16:9 且不拉伸？
核心是三层控制：容器定型 + 图片铺满 + 裁剪对齐。用 object-cover 是最常用解法，但得配对使用。
- 给图片父容器加
relative w-full aspect-video（Tailwind v3.4+ 支持aspect-video，旧版用aspect-[16/9]） - 图片自身加
absolute inset-0 h-full w-full object-cover，确保填满且裁剪 - 如果想让关键区域（比如人脸）居中，补上
object-center；需要偏上则用object-top - 避免用
max-w-full或max-h-full，它们会破坏裁剪逻辑
<div class="relative w-full aspect-[16/9] overflow-hidden"> @@##@@ </div>
object-contain 和 object-cover 在响应式布局里怎么选？
二者行为差异直接影响视觉结果：object-contain 保比例、留白；object-cover 保填充、裁剪。选错会导致卡片高度不一致或重要内容被切掉。
- 卡片网格（如产品列表）优先用
object-cover+ 固定容器aspect-[4/3]，保证所有卡片高度一致 - 头像或 Logo 场景用
object-contain，避免人脸变形，但得接受上下/左右留白 - 小屏下若图片文字说明紧贴图片底部，
object-cover可能切掉文字，此时改用object-scale-down更安全 - 注意 Safari 对
object-position的解析稍慢，动画中切换时偶有闪动，可加will-change: transform
为什么加了 object-cover 还是看到白边？
大概率是图片加载完成前，容器还没渲染出尺寸，或者图片加载失败 fallback 用了默认 inline 行高。
- 强制图片块级化：
block或inline-block，消除行内间隙 - 设置
font-size: 0在父容器上，干掉行高带来的额外空白 - 用
loading="lazy"时，加placeholder或骨架图占位，避免尺寸跳变 - 检查是否误用了
bg-contain（背景图类），它和object-fit无关，只作用于background-image
真正麻烦的是 SVG 或 base64 图片——它们没有固有尺寸，object-fit 失效，得手动设 width 和 height 属性或用 aspect-ratio CSS 原生属性兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
