使用 MP4 作为 div 背景并在窗口大小调整时填充空间

Question

我尝试过使用标签，但是当调整窗口大小时，我需要视频在调整窗口大小时填充空间。在最大比例下，它填充了空间，并且随着缩小，它开始在顶部和底部添加大量空白。

超文本标记语言

<video playsinline autoplay muted loop poster="images/user_item.mp4" class="w-100" style="">

    <source src="images/user_item.mp4" type="video/mp4">

</video>

CSS

video { 

    position: absolute;

    min-width: 100%;

    min-height: 100%;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    height: 300px;

    border-radius: 5px 0 0 5px;

}

是否可以在画布中播放视频并调整画布大小并使其填充所提供的整个空间？

Answer 1

不需要画布，只需使用 CSS 即可。特别是在这里，您想要该object-fit财产。默认情况下，视频设置为contains，这意味着它将把媒体的大小设置为最小边，并将边框添加到最大边，从而保持媒体的长宽比。从你的描述来看，很不清楚你是否想要cover保持宽高比但剪切媒体，video {     position: absolute;    width: 100vw;    height: 100vh;    top: 0;    left: 0;    object-fit: cover;}<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>或fill，它只是拉伸/收缩介质。video {     position: absolute;    width: 100vw;    height: 100vh;    top: 0;    left: 0;    object-fit: fill;}<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>对于未来的读者，请注意此 CSS 属性也可以设置为 <canvas>。