背景视频，始终按比例缩放到高度，如果需要，裁剪宽度

Question

抱歉，如果之前有人问过这个问题，但我一直在检查很多其他相关线程，它们并不是我想要的。

所以我有一个 1280x720 的视频，我希望它能成为我页面的视频背景。我希望它始终缩放以适应视口高度，但不更改纵横比。

所以这意味着如果视口最终宽度超过 16：9，那么我可以在侧面使用黑条/信箱。

但是，如果视口比 16：9 窄，则视频的侧面会被裁剪(我对此很好，因为视频的所有重要部分都在中心(。

你建议我怎么做？这让我发疯了。

Answer 1

我之前遇到了同样的问题。这就是我解决它的方式。

.containervideo {
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
left: 0px;
top: 0px;
overflow: hidden;
}

代码很简单。

Answer 2

好吧，如果没有一个工作示例，很难给出一个绝对有效的建议，但这里有一些东西会让你朝着正确的方向前进。

在视频周围创建一个具有绝对位置的包装器，并使用弹性框将内容(视频(居中置于页面中心，然后为其提供黑色背景。你可以用这样的东西来做到这一点：

.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
}

您可能需要使用视频的CSS，如下所示：

video {
width: auto;
height: auto;
max-width: 100vw;
max-height: 100vh;
}

这样的东西应该给你你想要的结果，或者至少接近它们。(不过我没有测试这个(

希望这至少能给你一些想法，如果它不起作用。将来，最好添加您当前的代码，以便我们更轻松地查看您实际尝试过的内容。