android - Ionic/Css/HTML 视频背景不填充背景？

Question

我遇到的问题是，在我的登录页面上，我的视频背景不适合整个屏幕宽度。背景效果完美，但视频背景不会自动 100% 适合。

我的登录屏幕应该是这样的:

这是我的登录屏幕在设备上的实际外观:

如您所见，我的设备屏幕对于视频来说太宽了。由于屏幕左侧和右侧的白色条，您可以看到它。那么有什么方法可以自动将视频始终拉伸(stretch)到 100% 宽度吗？

这是我的 HTML fragment :

  <video webkit-playsinline playsinline autoplay loop muted id="introp99">
    <source src="assets/video/introp99.mp4" type='video/mp4; codecs="h.264"'>
    <source src="assets/video/introp99.webm" type="video/webm">
  </video>

这是我的 CSS fragment :

//P99 Background Video
  #introp99 {
      position: fixed;
      filter: blur(2px);
      padding:0px;
      top: 50%;
      left: 50%;
      min-width: 150vw;
      width:105%;
      height:105%;
      z-index: -100;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
      background: url('../assets/video/introp99.mp4') no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }

正如您在我的 CSS 中看到的那样，我已经尝试将宽度设置为 100% 以上，例如 width: 110% 或 width: 150vw;但没有任何改变。视频始终保持相同的格式并且不会拉伸(stretch)。

Answer 1

经过长时间的研究，我终于可以通过将 object-fit: fill; 添加到视频 CSS 来实现它。