我们官网首屏的无限循环动画视频，需要不管video标签多宽多高，里面的视频都能覆盖满整个video标签，这时候用到了css3的一个属性：object-fit object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
取值： contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。 cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。 fill 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。 none 被替换的内容将保持其原有的尺寸。 scale-down 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
.fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }CSS 属性 object-position 规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景（background）。 你还可以使用 object-fit 属性来改变可替换元素的对象的内在（原文：intrinsic）大小（即它看上去的大小）的调整方式，借助拉伸与缩放等使对象更好地适应元素的内容框。
object-position 使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ] /* <position> values */ object-position: center top; object-position: 100px 50px; /* Global values */ object-position: inherit; object-position: initial; object-position: unset;