一、什么是object-fit？
当我们在使用img标签插入图片时，往往无法控制图片的适配大小，导致图片与容器的比例不协调，影响了美观程度。
此时，我们可以利用CSS3引入的object-fit属性控制图片的标准化适配，即无论图片比例如何，都能按照我们预设的大小在容器中完整展示。
object-fit属性定义了如何调整元素的大小和位置以适应其容器。
二、object-fit的使用
1. 属性值
object-fit属性可以接受5个属性值：
- `contain`: 将图片尽可能的展示在容器内；
- `cover`: 图片自适应容器大小，将其缩放并裁剪，使其完全填充容器；
- `fill`: 让图片充整个容器，会拉伸图片不保持其原有的比例；
- `none`: 图片保持原本的宽高比，并被完全包含在容器内；
- `scale-down`: 图片自适应容器大小，但是要保持原有比例，和`none`的区别在于如果图片自适应的大小比原有的大小小，那么就采用原有的大小。
2. 属性继承性
`object-fit`属性具有继承性，如果我们在容器的父级中设置了该属性，那么在容器中就不需要再设置了。
3. 兼容性问题
`object-fit`属性存在兼容性问题，不支持IE浏览器。
三、object-fit的应用场景
1. 解决图片适应容器问题
在一个动态布局的页面中，图片的显示尺寸不可避免地会发生变化。我们可以使用`object-fit`属性，让图片按照预设的大小和比例显示在容器中，从而美化页面、提高用户体验。
2. 动态自适应布局
由于能够自适应，所以`object-fit`可以适应各种尺寸像素的屏幕。
四、object-fit的代码示例
下面通过代码示例来说明`object-fit`的使用。
.container{
width: 500px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
position: relative;
}
.container img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
`.container`表示图片所在的容器，我们通过设置`position:relative; overflow:hidden;`来限制图片在容器中的显示范围。而`img`元素通过设置其`position:absolute; top:0; left:0; width:100%; height:100%;`来固定图片的位置和大小。而`object-fit`属性就是我们使用的关键之处。`cover`属性值可以让图片缩放并裁剪，使其充满整个容器。
五、总结
通过CSS3的引进的`object-fit`属性，我们可以更精准地调整图片的尺寸。而其能够自适应容器大小、适应各种屏幕尺寸的优势也增大了它的应用场景。