最近在一个项目中解决视频(video标签)的时候，发现一个新东西"object-fit"，之前没有了解过这些属性，于是查阅了相关一些资料，发现这个属性挺有用的，给大家推荐一下。
简介
官方原文：
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.
The object-position property determines the alignment of the replaced element inside its box.
object实际上指的是replaced element(替换元素)(W3C, MDN)
替换元素
不是所有元素都叫“替换元素”。在CSS中，“替换元素”指的是：
其内容不受CSS视觉格式化模型控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。
使用CSS的content属性插入的对象是匿名替换元素。
也就是说，本文的object-position和object-fit只针对替换元素有作用，也就是form表单家族控件系列，老牌劲旅img图片，HTML5新贵video视频等元素（SVG元素不支持，但可以作为src替换内容出现）。
关于视频poster封面图片
chrome中默认是object-fit:contain，当poster尺寸过小的时候就会如下问题：
注意播放器两边的留白，显然 这不是我们想要的样式，如果能完全覆盖就更好了。尝试按照background-size属性的写法尝试了改写为cover。效果如下：
参数值
.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, 最终呈现的是尺寸比较小的那个。
理解要点
img是个元素，且是个替换元素，这个通过上面的学习应该都知道；
一个图片，如果没有src，它依然是个替换元素，它在浏览器中的解析依然是正确的；
src指向的图片属于替换内容，注意，这个替换内容和这个img替换元素是壳子与内容的关系，两者是独立的。在CSS2.1时代，壳子的实际尺寸（如果没有CSS或HTML设置），则是跟随内容的实际尺寸，因此，网页加载的时候，我们会看到图片占据的高度从0到图片实际高度跳动的过程；如果壳子，也就是img有尺寸限制，则替换内容fill拉伸适应于 img替换元素的设定尺寸。总而言之，壳子与内容的尺寸永远是一样的。于是，我们就会误认为图片就是那个图片，唯一的存在，导致我们理解object-fit的特性表现出现了障碍。
在CSS3时代，object-fit的世界里，object-fit控制的永远是替换内容的尺寸表现，注意，是替换内容的尺寸表现，不是img替换元素。
之所以object-fit:contain会透明留白，是因为我们没有对壳子img设置背景色，假设我们给壳子img增加个红色背景，大家就会明白我说的意思了：
.box > img { width: 100%; height: 100%; background-color: #cd0000; }
效果如下截图，会发现，原来的透明留白现在是红色背景，说明了什么？说明img替换元素和src替换内容是两个独立体。img替换元素受到了CSS 100%拉伸控制（所以红色背景充满容器），src替换内容也受到了object-fit展示控制。大家各司其职，没有什么覆盖冲突！
假设我们使用的原始图片是：
容器的尺寸是160*160, 背景色是灰蓝色，同时，测试的图片高宽设置为100%, 如下CSS代码：
.box { width: 160px; height: 160px; background-color: #beceeb; }
.box > img { width: 100%; height: 100; }
结果，各个属性值的表现如下截图：
大家可以对照示意感受下，什么是内容拉伸(fill)，什么是内容全部都显示(contain)，什么是容器没有留白(cover)，什么是该多大就多大(none)。
<!doctype html><html><head><meta charset="utf-8"><title>CSS3 object-fit理解 以及object-fit的兼容性，包括兼容IE9+浏览器</title></head><body>
<style>
.box { width: 160px; height: 160px; margin: 10px 0 20px; background-color: #beceeb; overflow: hidden; resize: both; }
.box img {width: 160px; height: 160px; background-color: #cd0000;overflow: hidden;
object-fit:cover;
}
</style>
<link rel="stylesheet" href="object-fit-master/dist/polyfill.object-fit.css">
<strong>object-fit: cover</strong>
<div class="box">
<img src="我的支付宝.jpg">
</div>
<!--兼容JS文件-->
<script src="object-fit-master/dist/polyfill.object-fit.js"></script>
<script>
// Call polyfill to fit in images
document.addEventListener('DOMContentLoaded', function () {
objectFit.polyfill({
selector: 'img',
fittype: 'cover'
});
});
</script>
<!--//兼容JS-->
</body>
</html>
object-fit兼容性
首先，看下object-fit目前兼容的浏览器，IE是完全不支持啊，怎么搞到object-fit去兼容至少IE9呢！
对于IE全部不兼容，那么总有办法吧？ 下面介绍一个方法，使用CSS+JS的方法去兼容IE9+!
下面看一个案例：（可以支持IE9+）
object-position理解
object-position要比object-fit单纯的多，就是控制替换内容位置的。默认值是50% 50%，也就是居中效果，所以，无论上一节object-fit值为那般，图片都是水平垂直居中的。因此，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit.
与background-position类似，object-position的值类型为<position>类型值。也就是说，CSS3的相对坐标设定样式支持的。
例如替换内容一直定位在容器的右下角：
object-position: 100% 100%;
tips:以上内容由个大网友提供结合自己的学习理解整理形成，如有侵权请联系楼主。