Html Vue js中的视频不';t全宽显示&;高度
我想做一些像这样的 不幸的是,视频没有全高显示,相反,视频的高度有点超出屏幕,我甚至看不到控件 我希望视频覆盖100%的高度和宽度 我对整个组件的css如下所示: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
.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;
}