本文介绍如何通过 CSS 的 object-fit 属性（如 cover 或 fill）让背景视频随容器尺寸变化自动拉伸或裁剪，从而完美覆盖不同屏幕尺寸下的内容区域，无需维持固定宽高比。
本文介绍如何通过 css 的 `object-fit` 属性（如 `cover` 或 `fill`）让背景视频随容器尺寸变化自动拉伸或裁剪，从而完美覆盖不同屏幕尺寸下的内容区域，无需维持固定宽高比。
在构建响应式页面时，常需将视频作为某区块的背景，并在其上叠加文字、卡片或 FAQ 等内容。当视口变窄（如移动端），若内容采用 flex-column 布局，容器高度会显著增加；此时若背景视频仅设为 width: 100%; height: 100%，却未指定缩放行为，极易出现留白、裁剪不当或严重变形等问题。
关键在于：object-fit 决定了 ，而非单纯缩放容器本身。它与 img 标签行为一致，但对
✅ 推荐方案：使用 object-fit: cover 或 object-fit: fill
- object-fit: cover：保持视频原始宽高比，等比缩放并居中裁剪，确保完全覆盖容器（可能丢失边缘内容）。适合强调视觉完整性。
- object-fit: fill：强制拉伸视频以完全填满容器，不维持宽高比，适用于对形变不敏感的抽象/背景类视频。
⚠️ 注意：object-fit 必须配合显式设置 width 和 height（如 100%）才生效；仅设 width: 100% 而未设 height，则 object-fit 不起作用。
? 示例代码（Tailwind + 原生 CSS 混合说明）
<div class="relative py-16 min-h-[50vh] md:min-h-[70vh]">
<!-- 背景视频：覆盖整个父容器 -->
<video class="absolute inset-0 w-full h-full object-cover z-0" autoplay loop muted playsinline><source src="/back_video.mp4" type="video/mp4"></source></video><!-- 叠加内容：使用 z-10 确保在视频上方 --><div class="relative z-10 px-4 max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-white drop-shadow-lg">常见问题</h2>
<div class="mt-6 space-y-4 text-gray-100">
<!-- FAQ 列表 -->
<p>Q：如何联系客服？</p>
<p>A：请发送邮件至 support@example.com</p>
</div>
</div>
</div>
? 关键要点总结
- ✅ 必须为
- ✅ 使用 min-h-[Xvh]（如 min-h-[50vh]）确保容器有足够高度，避免视频被压缩；
- ❌ 避免仅依赖 width: 100% 而忽略 height —— 此时视频高度由内容决定，无法响应式填充；
- ? 在移动端，可结合 @media 或 Tailwind 的 md: 断点调整 min-h-*，使视频区域随内容高度自然延展；
- ? 若需更精细控制（如顶部固定内容、底部渐变遮罩），可在 .relative 容器内添加伪元素（::before）或 div 实现蒙版层，提升文字可读性。
通过合理组合 object-fit 与响应式容器高度策略，即可实现背景视频“智能贴合”内容布局的效果，兼顾视觉表现与跨设备兼容性。
