video标签的自动填充
HTML5里，用video标签就能轻松插个视频到网页上！想让视频自动填满父div的话，往video标签加点简答的CSS属性就行了。只需加上style=”width: 100%; height: 100%; object-fit: fill”这几句话，视频瞬间就能跟着父div变大了，整个页面也会好看很多哟~
object-fit属性详解
object-fit这个属性就是用来调整图片啦视频之类的东西在容器里怎么显示大小的。它有几个选项，像填充、包含、覆盖啊、没有、缩小等等。每个选项都有个性特点，咱们来详细说说。
fill：完全填充
填充就是对象铺满属性的老规矩了，让新换上的东西把原来那货给挤占十足，哪怕全都是破事儿！就是说，元素里的东西大小长短都会因为老爸容器大小而变来变去，要么变大，要么缩水。
object-fit:fill | contain | cover | none | scale-down
要是用 fill 属性的话，整个父 div 都会被视频撑满，可能画面看起来就有点儿变形了。不过，你要是不在意这点小变化，那还是挺好使的。
contain：保持长宽比例填充
用contain可以保持替换的元素长度和宽度不变，塞到整个元素里去。比如你给替换元素设定好了高宽，那这视频就会按这个比例显示出来，而且还能正好塞进元素里头。
你要是想让视频保持原来的大小和形状，而且能完全展现在父DIV里面的话，那就选contain。不管视频变多大或者多小，它都不会变形拉扯！
cover：覆盖整个元素
这意思就是说，cover让替换的东西跟原来的比例不变，还会把新东西变到正好能遮住旧东西的大和高。简单来说就是，视频的大小要跟着父div变，这样才能把老东西全挡住。
希望视频全覆盖爸比div且零缝隙？选cover准没错！不过得小心咯，视频里可能会有小部分被裁掉。
none：不调整大小
当 none 时,替换的东西不会因为内容多而自动变大或变小，就算你设定了很具体的高和宽还是不管用哒，它还是会保持原来的样子在里面晃来晃去。
想让视频原汁原味？不想变形压扁就选none！这样不管视频是否小于父div，都能按照本来的样子展示~
scale-down：相对缩小
两种替换元素的大小设定（none和contain）都代表着，如果大过了，就把它变小点。所以要是视频太大，别担心，它自己就会自然缩小到适合空间里。
缩放功能就挺适合那些想在保持原画长宽比的同时，把超大视频变小。这样的话，能看到整幅画面，而且感觉也不会很诡异。
只要选好合适的 object-fit 属性值，就能随心所欲地控制视频在父 div 中的样子，让网页看起来更美！
评论0