html - 视频宽度缩放不正确

Question

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

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% 并不能完全解决这个问题，因为它会使图像左右两侧出现白条，即使视频正确缩放。有什么办法可以解决这个问题吗？

Answer 1

如果我对您的理解正确，您想要实现的是保持视频的宽高比，但要使其适应周围环境，而不会不按比例拉伸(stretch)视频。以下是我的做法:

将视频元素包裹在 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 : 调整视口(viewport)宽度以查看其工作原理。