Question

如果之前有人问过这个问题，我会道歉，但我一直在查看其他一些相关主题，而且他们并不完全是我正在寻找的内容。

所以我有一个1280x720的视频，我希望能够制作我的网页视频背景。我希望它可以随时缩放以适合视口高度，但不要更改宽高比。

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

但是如果视口比16：9窄，视频的边被裁剪（我很好，因为视频的所有重要部分都在中心）。

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

Answer 1

好吧，如果没有一个有效的例子，很难给出一个肯定会有效的建议，但这里的内容可能会让你朝着正确的方向发展。

围绕具有绝对位置的视频创建包装，并使用flexbox将内容（视频）置于页面中心的中心，然后为其提供黑色背景。你可以这样做：

.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;
}

这样的东西应该能够给你想要的结果，或者至少接近它们。（虽然我没有测试过这个）

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

Answer 2

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

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

代码很简单。

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

2 个答案: