视频全屏展示(适应各种屏幕尺寸)
方法一(不兼容所有IE)
object-fit:fill;
<div class="banner">
<video
src="@/assets/video/yun.mp4"
autoplay
style="width:100%;height:100%;object-fit:fill;"
loop
muted
></video>
</div>
css
.banner {
width:100%;
height:100vh; // 浏览器视口大小
}
viewport 可视窗口
单位 | 说明 |
---|---|
vw | 可视窗口的宽度,1vw等于viewport宽度的1% |
vh | 可视窗口的高度,1vh等于viewport高度的1% |