css - 如何更改背景 html5 视频的缩放模式？

Question

<div class="mission-statement">
    <video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
        <source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
    </video>
</div>

#mission-statement {
  margin-top: 0px;
  margin-bottom: auto;
  height: 100vh;
  width: 100vw;
}

video#bgvid

  {width: 100%; height: 100%; position: relative;}

目前我在这个div的背景中有一个视频。但是目前，当屏幕很宽时，左右都有空间，当屏幕很窄时，顶部和底部都有空间。

相反，我希望视频能够缩放，以便它始终接触所有 4 个边。如果浏览器很窄，它会被缩放，这样视频的左右部分就会被截断。如果浏览器真的很宽，它会被缩放以切断顶部和底部。

我怎样才能做到这一点？

Answer 1

如果您只关心符合 W3C 标准的真正的现代浏览器(即不是 IE)，请使用 object-fit:cover .如果 IE 是必须的，那么有一个 polyfill ，但除此之外，当很明显的设计与理智和逻辑的一切冲突时，强制像 IE 这样的“浏览器”符合要求将花费太多的精力和时间。

以全页模式查看

演示

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

#mission-statement {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

video#bgvid {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="mission-statement">
  <video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid">
        <source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
    </video>
</div>