现代web环境，响应式布局都比较常见。 如果一张图片使用固定尺寸，在处理这些有着固定尺寸的图片的时候，就会遇到障碍。   例如，一个2:1的图片，永远要等比例充满容器。 但是，随着浏览器宽度不一样，容器的长宽比有也肯定不一样。 我们更早的时候使用JS去把控，或者使用background-size处理类似效果。   如今，正是为了应对类似这样的响应式需求，object-fit和object-position应运而生。 下面我们只讲object-fit属性。 object-position主要就是控制位置，这个大家可以网搜。 object-fit和object-position之间的关系有点类似于background-size和background-position。 无论是，关系还是属性值，都有相似之处。 因此，我们在理解object-fit和object-position的时候，可以或多或少映射background-size和background-position。   下面的一系列示例就是向大家演示，object-fit取不同值时，图片的变化。 我们给图片套一个figure标签，即figure是img的父级容器。   http://local/10.complexmission.com/docs/object-fit