Html Vue js中的视频不';t全宽显示&;高度

Html Vue js中的视频不';t全宽显示&;高度,html,css,vue.js,sass,Html,Css,Vue.js,Sass,我想做一些像这样的 不幸的是,视频没有全高显示,相反,视频的高度有点超出屏幕,我甚至看不到控件 我希望视频覆盖100%的高度和宽度 我对整个组件的css如下所示: .screensaver { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: gray; z-index: 9000; .logo{ background-image: url(~@/assets/test.s

我想做一些像这样的

不幸的是,视频没有全高显示,相反,视频的高度有点超出屏幕,我甚至看不到控件

我希望视频覆盖100%的高度和宽度

我对整个组件的css如下所示:

.screensaver {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: gray;
 z-index: 9000;
 .logo{
     background-image: url(~@/assets/test.svg);
 }
&-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.00) 100%);
    z-index: 1500;
    display: flex;
    align-items: center;
    padding: $layout-size*1.25 $layout-size;
    &-left{
        flex: 0 0 320px;
    }
}
&-body {
    top: 0;
    position: absolute;
    height: 100vh;
    width: 100vw;
    &:after{
        content:'';
        background-color: rgba(0,0,0, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    video{
        min-height: 100%;
        min-width: 100%;
        height: 100vh;
        display: block;
    }
    &-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 10;            
       }
    }
 }
================= 我的vue模板:

    <template>
        <div class="screensaver">
          <div class="screensaver-header">
            <div class="screensaver-header-left">
                <span class="logo">Test</span>
            </div>
        </div>
        <div class="screensaver-body">
            <video controls autoplay muted loop>
                <source :src="require('test.mp4')" type="video/mp4">
            </video>
            <div class="screensaver-body-center">
                <span>icon</span>
                <h2>plz touch to unlock</h2>
            </div>
        </div>
      </div>

试验
偶像
plz触按可解锁

找到了这个问题的解决方案。我们可以操纵视频对象,它可以改变视频的光学特性,但是变化不大,我们可以很容易地使用它

video {
    height: 100vh;
    width: 100vw;
    object-fit: fill;
}

找到了解决这个问题的办法。我们可以操纵视频对象,它可以改变视频的光学特性,但是变化不大,我们可以很容易地使用它

video {
    height: 100vh;
    width: 100vw;
    object-fit: fill;
}