当我们在页面上引入一张图片的时候，我们可以放置一个 img 元素：
<img src="..." />，并且用 css 指定它的大小：
img {
width: 100px;
height: 100px;
}
如果实际图片的大小和元素的大小相同，那么就不需要额外的操作。但如果实际图片的大小和元素的大小不同，那么我们就需要使用 css 来控制图片如何在 img 元素里显示。
object-fit
object-fit 主要用途就是控制图片如何在 img 元素里面显示。它有 5 个值，分别是：
- fill：不考虑图片的比例，将图片缩小或者放大到同 img 元素同样的大小。
- cover：保持图片的比例，将图片充满整个 img 元素
- contain：保持图片的比例，让 img 元素能够包含整张图片
- none：按原始大小展示图片，如果超过 img 元素的大小，超出部分进行裁剪
- scale-down：从 'none' 或者 'contain' 属性中，选择实际展示区域较小的属性
例子1：img元素大小=100x100，图片大小=100x100，object-positon: top left;
图片大小和 img 元素大小一致，不同的值表现相同。
例子2：img元素大小=100x100，图片大小=300x100，object-positon: top left;
图片比 img 元素宽，此时：
- fill：图片被压缩成 100x100，不考虑原始比例
- cover：图片原始大小刚好可以填充 img 元素，无需缩小或者放大，根据 object-position 属性显示左上区域，超出部分被裁剪
- contain：图片的宽高比大于 img 元素的宽高比，需要缩放宽度直到和 img 元素的宽度相同
- none：图片按原始大小显示，根据 object-position 属性显示左上区域，超出部分被裁剪
- scale-down：选择 'contain' 属性，因为 'contain' 属性实际展示区域较小
例子3：img元素大小=100x100，图片大小=100x300，object-positon: top left;
图片比 img 元素高，此时：
- fill：图片被压缩成 100x100，不考虑原始比例
- cover：图片原始大小刚好可以填充 img 元素，无需缩小或者放大，根据 object-position 属性显示左上区域，超出部分被裁剪
- contain：图片的宽高比小于 img 元素的宽高比，需要缩放高度直到和 img 元素的高度相同
- none：图片按原始大小显示，根据 object-position 属性显示左上区域，超出部分被裁剪
- scale-down：选择 'contain' 属性，因为 'contain' 属性实际展示区域较小
例子4：img元素大小=100x100，图片大小=50x80，object-positon: top left;
图片 比 img 元素小，此时：
- fill：图片被放大成 100x100，不考虑原始比例
- cover：保持图片比例，放大图片，直到覆盖整个 img 元素
- contain：保持图片比例，放大图片，直到 img 元素能够包含整张图片
- none：图片按原始大小显示，根据 object-position 属性显示具体区域，超出部分被裁剪
- scale-down：选择 'none' 属性，因为 'none' 属性实际展示区域较小
