开发中大量使用了video标签,video标签比较有个性,就算你设置了固定的宽高,它依然会根据其中一个属性来自己缩放,所以总会出现空白间隙,如何使video能够自适应的撑满整个父级容器呢。
这里可以给video样式加上 object-fit:cover;属性 如此video即可实现自适应宽高
代码如下
外层的父级样式
.initial-video{
width: 100%;
height: 100%;
position: fixed;
background-color: #000;
z-index: 3;
}
video适应父级的样式
.initial-video video{
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit有以下几个属性
fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此
参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
注意
object-fit属性是完全不兼容ie的,如果有办法兼容ie的话希望可以留言分享一下
关于object-fit更多的介绍可以参考张鑫旭大神写的文章链接点击这里