Ionic / Css / HTML视频背景不填充背景?

时间:2017-05-25 14:38:52

标签: android html css ionic-framework ionic2

我遇到的问题是,在我的登录页面上,我有一个视频背景,它不适合整个屏幕宽度。背景效果很好,但视频背景不能100%自动适应。

这就是我的登录屏幕的样子:

LoginScreen

这是我的登录屏幕在设备上实际显示的方式:

Screenshot

正如您所看到的,我的设备屏幕对于视频而言是广泛的。 您可以看到它,因为屏幕左侧和右侧有白条。 那么有没有办法自动将视频拉伸到100%宽度?

这是我的HTML代码段:

  <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代码段:

//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%,如宽度:110%或宽度:150vw;但没有变化。视频始终保持相同的格式并且不会延伸。

1 个答案:

答案 0 :(得分:1)

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