最近笔者在写一个个人主页时碰到了一个问题,就是希望用视频作背景但不能实现随窗口大小自动拉伸并居中,经过学习研究,笔者最后总结了两种方法实现,分别是css3的新属性和JavaScript实现。
CSS3
首先声明一下追求的效果:视频居中,并且尽可能使视频更多内容能显示。
容器(div) > 视频(video)
容器css设置为
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
CSS3新增了object-fit
属性,属性值有:fill、contain、cover等,三者是否能满足要求?可以和笔者一起测试一下。(笔者用的视频宽高为1080*1920)
视频css若是设置为:
.video_box{
position: absolute;
//设置居中显示
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
object-fit: fill; //contain和cover其实是一样的效果
}
因为视频宽高太大所以直接以原比例居中填充了容器,使得一部分内容被裁剪了,很明显不满足要求。那么我们给视频加上宽高的限制。
.video_box > video{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
height: 100%;
width: 100%;
object-fit: fill;
}
这里注意宽高限制都要加上,若是少一个效果将会偏向满足另一个。此时很明显有问题,视频会被拉伸来适应容器大小,使得视频显示失去比例,fill不符合我们的需求。
若是使用contain,则将会尽可能满足高度与容器相同而宽度按原比例,也不满足要求。
而cover则能很好的满足我们的要求。
.video_box > video{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
height: 100%;
width: 100%;
object-fit: cover;
}
Javascript
其实分析要求后的大概意思就是,尽量满足视频宽或高中至少一项符合容器宽或高,另一项必须按原比例拉伸至至少充满容器。那么可以写出以下JS代码:
window.addEventListener('resize',function() {
var h = window.innerHeight;
var w = window.innerWidth;
var bg = document.querySelector('.video_box video');
if(w / h > 1920 / 1080) { //1920*1080为视频宽高比
bg.className = 'v_w';
} else {
bg.className = 'v_h';
}
})
css设置为
.v_w{
width: 100%;
/* height: 100%; */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: block;
}
.v_h{
/* width: 100%; */
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: block;
}
思路为,若是宽高比过大则满足宽度适配容器,如果宽高比过小就满足高度适配容器。
但还有一点小问题,在首次加载并且在页面大小改变前js都不会执行,所以再加上一个onload(‘load’)事件使第一次打开页面后也能应用宽高设置。完整js代码为:
window.onload = function() {
var h = window.innerHeight;
var w = window.innerWidth;
var bg = document.querySelector('.bg video');
if(w / h > 1920 / 1080) {
bg.className = 'v_w';
} else {
bg.className = 'v_h';
}
}
window.addEventListener('resize',function() {
var h = window.innerHeight;
var w = window.innerWidth;
var bg = document.querySelector('.bg video');
if(w / h > 1920 / 1080) {
bg.className = 'v_w';
} else {
bg.className = 'v_h';
}
})
js代码为笔者拙见,若有更好的实现方法欢迎多与笔者交流!