0

我有一个小问题。我有一个视频，我想根据浏览器进行调整，它不应该拉伸，但也不应该有任何可见的空间

HTML：

<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>

CSS：

#wereldbol {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-size:cover;
}

background-size: cover;导致视频偏离中心的问题，有没有其他方法可以覆盖浏览器的整个宽度和高度？目前width: 100%并height: 100%没有完全解决这个问题，因为即使视频正确缩放，它也会让图像在左右两侧有一个白条。有没有办法解决这个问题？

4

2 回答 2

2

如果我理解正确，您想要实现的是保持视频的纵横比，但使其适应周围环境，而不会使视频不成比例地拉伸。这是我的做法：

将视频元素包装在 a 中div，如下所示：

<div class="video-wrapper">
    <video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>

然后使用以下 CSS：

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
  overflow: hidden;
  border: 0;
}

.video-wrapper video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

编辑：这是一个plunker：调整视口宽度以查看它是如何工作的。

于 2014-10-31T13:08:53.683 回答
0

您需要使用“纵横比技巧”调整 CSS 以适应确切的纵横比，或者使用 FitVids.js 之类的东西 - 请参阅http://fitvidsjs.com/

于 2014-10-31T12:57:59.650 回答