object-fit？

知道有这个属性存在，是一个很偶然的机会。有一天，设计部的一个小伙伴给了我一个网址，说很有个性，让我看一下，当发现一个很有意思的效果时，作为一个前端小兵的我当然是第一时间开始审查元素，然后看到了这个从没听说过的属性 object-fit 。

object-fit是什么属性？

MDN上的解释是：

The object-fit CSS property specifies how the contents of a replaced element      should  be fitted to the box established by its used height and width.

其实我是没看太明白，所以呢，只能求助大神的博客了，以下内容是对他们的博客内容的参考，借此加深自己对这个属性的理解。深入学习了解请点击-->半深入理解CSS3 object-position/object-fit

属性中的object指的是replaced element(替换元素)。

什么是替换元素？ （详情-->这里）

其内容不受CSS视觉格式化模型控制的元素，例如image，嵌入的文档(iframe之类)或者applet。img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。css模型渲染模型不考虑替换元素内容的渲染，这些替换元素独立展现于CSS。object,video,textarea,input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用css的content属性插入的对象是匿名替换元素。

object-fit属性只针对替换元素有作用,也就是form表单控件，img，video标签。

object-fit属性可以有五种取值。 fill | contain | cover | none | scale-down

1.fill-->替换内容填满整个content-box,不保持原有比例。

2.contain-->操持原尺寸比例。保证替换内容尺寸一定可以在容器中放得下。但可能回留出空白。

3.cover--> 保持原有尺寸比例，保证替换内容尺寸一定大于容器的大小，宽度和高度至少有一个和容器一致。但可能会使替换内容部分区域不可见。

4.none--> 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

5.scale-down-->类似依次设置none或contain,最终呈现的是尺寸较小的那个。

概念理解：

img是个替换元素，如果没有src属性，依然是个替换元素，在浏览器中的解析依然是正确的，图片的src属性指向的图片属于替换内容，替换内容和替换元素是盒子与内容的关系，二者是独立的。在CSS3时代，object-fit控制的永远是替换内容的尺寸表现。不是替换元素img。我们对img设置宽和高为100%时，实际上控制的是img这个元素，这个盒子的尺寸是100%撑满容器。

注意：IE浏览器不支持object-fit属性。

项目中使用：在做一个需要响应式网站的时候，在移动端banner图显需要只显示大图的中心部分，其他部分隐藏。使用obeject-dit属性完美解决这个问题。