html5视频怎么铺满_html5用video设width:100% height:100%让视频铺满容器【布局】

使用object-fit: cover配合父容器明确高度可实现视频真正铺满；若需兼容旧浏览器，可用绝对定位+transform缩放；伪元素遮罩适用于极低版本内核；JavaScript动态计算缩放系数则适配响应式场景。

如果您使用HTML5的<video></video>标签时发现视频无法完全铺满父容器，即使设置了width:100%和height:100%，则可能是由于默认的宽高比约束、父容器未设置尺寸或视频固有比例导致拉伸异常。以下是实现视频真正铺满容器的多种方法：

一、使用object-fit属性控制视频内容填充方式

object-fit用于定义替换元素（如<video></video>）的内容如何适应其容器尺寸，可避免黑边或变形问题，适用于现代浏览器。

1、为<video></video>元素添加CSS样式：width: 100%; height: 100%; object-fit: cover;。

2、确保其父容器具有明确的高度（例如height: 400px;或height: 100vh;），否则height: 100%将失效。

立即学习“前端免费学习笔记（深入）”；

3、若需完全拉伸不留空隙且允许形变，可将object-fit值改为fill；若需保持比例并裁剪边缘，使用cover；若需完整显示且留黑边，使用contain。

二、通过绝对定位与负边距模拟铺满效果

当父容器尺寸固定但object-fit不可用（如旧版Safari或IE）时，可通过定位+缩放组合强制视觉铺满，不依赖CSS3新特性。

1、将<video></video>设为position: absolute;，并设置top: 0; left: 0; width: 100%; height: 100%;。

2、为其添加transform: scale(1.2);等值，手动放大以覆盖容器边界。

3、配合transform-origin: center;和overflow: hidden;于父容器，隐藏溢出部分，实现视觉上无黑边的铺满效果。

标签： html5 css javascript java css3 html 伪元素 浏览器 safari ai win cs