object-fit
取值
- contain
被替換的內容將被縮放，以在填充冤死的內容框時保持其寬高比碘梢。整個對象在填充盒子的同時保留其長寬比咬摇，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”煞躬。 - cover
被替換的被人保持其寬高比的同時填充元素的整個內容框肛鹏。如果對象的寬高比與內容不相匹配，該對象將被剪裁以適應內容框汰翠。 - fill
被替換的內容正好填充元素的內容框龄坪。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配复唤，那么該對象將被拉伸以適應內容框健田。 - none
被替換的內容保持其原有的尺寸。 - scale-down
內容的尺寸與none或contain中的一個相同佛纫，取決與它們兩個之間誰得到的對象尺寸會更小一些妓局。
正式語法
object-fit: fill | contain | cover | none | scale-down;
示例
示例用的是同一張圖片，元素的寬高比為150:100和100比150（單位：像素）
一個在線編輯器上寫的demo
示例.png
其他
-
黑邊（Letterboxing）
為屏幕中顯示的內容除了正常影像外呈宇，兩側或四周多出來的未顯示區(qū)域好爬。因該區(qū)域為黑色，故稱之為黑邊甥啄。黑邊的產生是由于原始影像與屏幕的尺寸規(guī)格不同所造成的存炮。
在多媒體影像發(fā)展的過程中，有提出并定制幾個基準畫面尺寸蜈漓。目前可概分為標準穆桂、寬屏幕、電影寬屏幕三種類型融虽，這幾種其畫面尺寸與長寬比各有差異享完。
1> 寬屏幕與電影寬屏幕的影像轉成標準尺寸是上下會出現(xiàn)黑邊，稱為“信箱模式”(Letterbox)有额。
2> 標準尺寸轉換成其他尺寸（主要是寬屏幕）的影像時左右會出現(xiàn)黑邊般又，稱為“郵筒模式”(Pillarbox)彼绷。
3> 此外兩種類型會依不同場合，有時在制作影片原檔是就將黑邊加入茴迁，也有播放機器自動依信號不同進行轉換的情形寄悯。因此當兩者皆進行畫面轉換時，就會有上下左右都會出現(xiàn)黑邊的黑框畫面（一般原因是影像來源出現(xiàn)問題造成）堕义。這情形的專業(yè)用語為“窗盒”(Windowbox)热某。
前述“信箱”在16:9寬屏幕畫面上顯示情形
前述“郵筒”在4:3標準幕畫面上顯示情形
