object-fit （image,video）自适应

• 替换元素

         其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
        CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

为何需要object-position/object-fit?

        适配响应式布局

• object-fit理解

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

每个属性值的具体含义如下：

• fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
• contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
• cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
• none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
• scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
  
  
• 范例

其原本的尺寸是450*302像素，容器的尺寸是160*160, 背景色是灰蓝色，同时，测试的图片高宽设置为100%。代码如下：

css

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  width:302px;
  height:202px;
  border:1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit:fill;
}

img{
  width:100%;
  height:100%;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

HTML

效果图：

object-fit:fill;

object-fit:contain;

object-fit:none;

object-fit:cover;(不太理解)

object-fit:scale-down;

scale-down由于具有动态特性，所以要专门展示下。实际的替换内容表现是none和contain最终尺寸小的那个属性值的表现。

例如，假设我们的容器可以resize拉伸，改变其尺寸，则当容器尺寸比450*302小的时候，也就是容器比替换内容（这里的图片）实际尺寸小的时候，效果跟contain一致，因为此时contain的实际展示尺寸比none小。如下截图示意：

但是，当容器尺寸拉伸到比图片实际尺寸还大的时候，则效果跟none一致，因为此时none的实际展示尺寸比contain小。如下截图：