video標(biāo)簽播放視頻，視頻寬高和播放器寬高

我們官網(wǎng)首屏的無(wú)限循環(huán)動(dòng)畫視頻，需要不管標(biāo)簽多寬多高，里面的視頻都能覆蓋滿整個(gè)標(biāo)簽，這時(shí)候用到了css3的一個(gè)屬性：-fit

-fit CSS 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。

可以通過(guò)使用 - 屬性來(lái)切換被替換元素的內(nèi)容對(duì)象在元素框內(nèi)的對(duì)齊方式。

取值：

被替換的內(nèi)容將被縮放，以在填充元素的內(nèi)容框時(shí)保持其寬高比。 整個(gè)對(duì)象在填充盒子的同時(shí)保留其長(zhǎng)寬比，因此如果寬高比與框的寬高比不匹配，該對(duì)象將被添加“黑邊”。

被替換的內(nèi)容在保持其寬高比的同時(shí)填充元素的整個(gè)內(nèi)容框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，該對(duì)象將被剪裁以適應(yīng)內(nèi)容框。

fill

被替換的內(nèi)容正好填充元素的內(nèi)容框。整個(gè)對(duì)象將完全填充此框。如果對(duì)象的寬高比與內(nèi)容框不相匹配，那么該對(duì)象將被拉伸以適應(yīng)內(nèi)容框。

none

被替換的內(nèi)容將保持其原有的尺寸。

-down

內(nèi)容的尺寸與 none 或 中的一個(gè)相同，取決于它們兩個(gè)之間誰(shuí)得到的對(duì)象尺寸會(huì)更小一些。

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

CSS 屬性 - 規(guī)定了可替換元素的內(nèi)容，在這里我們稱其為對(duì)象（即 - 中的 ），在其內(nèi)容框中的位置。可替換元素的內(nèi)容框中未被對(duì)象所覆蓋的部分，則會(huì)顯示該元素的背景（）。

你還可以使用 -fit 屬性來(lái)改變可替換元素的對(duì)象的內(nèi)在（原文：）大小（即它看上去的大小）的調(diào)整方式，借助拉伸與縮放等使對(duì)象更好地適應(yīng)元素的內(nèi)容框。

-

使用 1 到 4 個(gè)值來(lái)定義該元素在它所處的二維平面中的定位。可以使用相對(duì)或絕對(duì)偏移。

 = [ [ 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;