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一样，当它的显而易见的设计与一切理智和合乎逻辑的东西发生冲突时都要符合。

以整页模式查看

演示

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

video#bgvid {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

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

2 个答案:

演示