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）
  为屏幕中显示的内容除了正常影像外，两侧或四周多出来的未显示区域。因该区域为黑色，故称之为黑边。黑边的产生是由于原始影像与屏幕的尺寸规格不同所造成的。
  在多媒体影像发展的过程中，有提出并定制几个基准画面尺寸。目前可概分为标准、宽屏幕、电影宽屏幕三种类型，这几种其画面尺寸与长宽比各有差异。
  1> 宽屏幕与电影宽屏幕的影像转成标准尺寸是上下会出现黑边，称为“信箱模式”(Letterbox)。

  
  

2> 标准尺寸转换成其他尺寸（主要是宽屏幕）的影像时左右会出现黑边，称为“邮筒模式”(Pillarbox)。

3> 此外两种类型会依不同场合，有时在制作影片原档是就将黑边加入，也有播放机器自动依信号不同进行转换的情形。因此当两者皆进行画面转换时，就会有上下左右都会出现黑边的黑框画面（一般原因是影像来源出现问题造成）。这情形的专业用语为“窗盒”(Windowbox)。

前述“信箱”在16:9宽屏幕画面上显示情形
前述“邮筒”在4:3标准幕画面上显示情形

以上文档来自MDN和维基百科
end