现代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的父级容器。
 
https://10.1pxeye.com/docs/object-fit