如何让video宽高撑满父级

开发中大量使用了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更多的介绍可以参考张鑫旭大神写的文章链接点击这里