适用场景：

当你想要在一个固定大小的div盒子中添加一张超出div盒子的背景图片时

小例子：

<div>
	<img src="https://img.dpm.org.cn/Public/static/themes/image/bo/more2.png">
</div>

*{
	background-color: #8B0000;
	padding: 0;
    margin: 0;
}
div{
	width: 48px;
	height: 48px;
	overflow: hidden;
	background-color: #fff;
	margin:200px auto;
}
img{
	background-color: #fff;
}

效果图：

图片超出固定盒子的部分被隐藏了

​
正常情况下，我的想法是：设置图片的宽度和高度，让图片去适应盒子

代码实现：

/* 第一种 */
img{
	width: 100%;
	height: 100%;
	background-color: #fff;
}
/* 第二种 */
img{
	width: 100%;
	background-color: #fff;
}

效果图：

第一种写法： 图片已经变形了 => 不可行

​
第二种写法： 图片正常显示，但是并没有垂直居中，需要后期再调整一下margin值 => 稍微有点麻烦

后来，发现了一种更便捷的写法：object-fit: contain;

使用它实现图片等比缩放，一行代码直接搞定，无需调整margin值…

代码实现：

img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #fff;
}

效果图：

直接一步到位，图片保持原有形状，垂直居中，是想要实现的效果~

---

接下来， 是 object-fit 相关属性的详细介绍：

object-fit

作用： 在原始比例上进行剪切、缩放或拉伸等。

适用： img 和 video 标签。

属性值:

• object-fit: fill; [拉伸填充整个容器,不保证保持原始比例]

  

• object-fit: contain; [按原始比例进行缩放(等比缩放)]

  

• object-fit: cover; [保持原始比例(部分内容可能被剪切)]

  

• object-fit: none; [维持原有内容不变]

  

• object-fit: scale-down; [如果容器尺寸大于图片尺寸，保持图片原有尺寸；如果容器尺寸小于图片尺寸，用法同contain]

  

• object-fit: initial; [设置为默认值]

  

• object-fit: inherit; [继承父元素属性]

  

​