object-fit是CSS3中的一个属性，用于指定图片或视频如何适应其容器。该属性可以用于<img>、<video>、<object>等元素。

当一个图片或视频被包含在一个容器中时，它可能会与容器的宽高比不匹配，此时就需要通过object-fit属性来指定如何调整图片或视频的大小和位置。object-fit属性可以有以下几个值：

fill：将图片或视频拉伸或压缩，以填充容器，不保持宽高比。

contain：在保持宽高比的情况下，缩放图片或视频，使其能够完全包含在容器中，容器可能会留出空白区域。

cover：在保持宽高比的情况下，缩放图片或视频，使其能够完全覆盖容器，容器可能会有部分内容被裁剪。

none：不对图片或视频进行任何调整，它们会按原始大小显示在容器中。

scale-down：在保持宽高比的情况下，缩小图片或视频，使其不超过容器的大小，如果缩小后的大小小于原始大小，则按原始大小显示。

下面是一个示例代码：

HTML部分：

<div class="container">
    <img src="example.jpg" alt="example" />
</div>

CSS部分：

.container {
    width: 400px;
    height: 200px;
    border: 1px solid #ccc;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

在上面的代码中，我们创建了一个包含图片的容器，使用object-fit: cover属性将图片进行缩放，使其能够完全覆盖容器，并且使用overflow: hidden属性将超出容器范围的部分隐藏起来，以确保图片不会超出容器。

需要注意的是，object-fit属性只在支持该属性的浏览器中才能正常工作。对于不支持该属性的浏览器，可以使用其他方法来实现相同的效果，例如设置图片的宽高，或使用背景图片等。

版本支持情况：

Chrome：Chrome 31版本以上【2013年】

Firefox：Firefox 36版本以上【2015年】

Safari：Safari 7.1版本以上【2014年】

Opera：Opera 18版本以上【2013年】

Edge：Edge 16版本以上【2017年】

Internet Explorer：不支持