我們官網首屏的無限循環動畫視頻，需要不管標簽多寬多高，里面的視頻都能覆蓋滿整個標簽，這時候用到了css3的一個屬性：-fit

-fit CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。

可以通過使用 - 屬性來切換被替換元素的內容對象在元素框內的對齊方式。

取值：

被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。

被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。

fill

被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那么該對象將被拉伸以適應內容框。

none

被替換的內容將保持其原有的尺寸。

-down

內容的尺寸與 none 或 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。

.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

CSS 屬性 - 規定了可替換元素的內容，在這里我們稱其為對象（即 - 中的 ），在其內容框中的位置?？商鎿Q元素的內容框中未被對象所覆蓋的部分，則會顯示該元素的背景（）。

你還可以使用 -fit 屬性來改變可替換元素的對象的內在（原文：）大?。此瓷先サ拇笮。┑恼{整方式，借助拉伸與縮放等使對象更好地適應元素的內容框。

-

使用 1 到 4 個值來定義該元素在它所處的二維平面中的定位?？梢允褂孟鄬蚪^對偏移。

 = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right |  ] [ top | center | bottom |  ]? | [ [ left | right ]  ] && [ [ top | bottom ]  ] ]


/*  values */
object-position: center top;
object-position: 100px 50px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;