CSS之object-fit详解

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

当一个图片或视频被包含在一个容器中时，它可能会与容器的宽高比不匹配，此时就需要通过object-fit属性来指定如何调整图片或视频的大小和位置。object-fit属性可以有以下几个值：
fill：将图片或视频拉伸或压缩，以填充容器，不保持宽高比。
contain：在保持宽高比的情况下，缩放图片或视频，使其能够完全包含在容器中，容器可能会留出空白区域。
cover：在保持宽高比的情况下，缩放图片或视频，使其能够完全覆盖容器，容器可能会有部分内容被裁剪。
none：不对图片或视频进行任何调整，它们会按原始大小显示在容器中。
scale-down：在保持宽高比的情况下，缩小图片或视频，使其不超过容器的大小，如果缩小后的大小小于原始大小，则按原始大小显示。

下面是一个示例代码：

<div class="img">
    <img src="img.jpg" />
</div>

.img {
    width: 400px;
    height: 400px;
    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：不支持