首先了解下object-fit的几个属性:
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
解释:
fill: 中文解析“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文解析“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
cover: 中文解析“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见(上面讲解的例子就是如此)。
none: 中文解析“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文解析“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
object-position要比object-fit单纯的多,就是控制图片在盒子中显示位置的。默认值是50% 50%,也就是居中效果,下次要实现尺寸大小不固定图片的垂直居中效果,可以试试object-fit.
与background-position类似,object-position的值类型为<position>类型值。也就是说,CSS3的相对坐标设定样式支持的。
这里就详细说了,自己可以动手试试。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>object-fit</title>
<style>
body,
html {
width: 100%;
height: 100%;
}
.contain {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 1000px;
margin: 0 auto;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6 {
width: 400px;
height: 220px;
margin-top: 20px;
margin-right: 20px;
border: 1px solid red;
}
.box1 img {
width: 100%;
height: 100%;
object-fit: fill;
}
.box2 img {
width: 100%;
height: 100%;
object-fit: contain;
}
.box3 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.box4 img {
width: 100%;
height: 100%;
object-fit: none;
}
.box5 img {
width: 100%;
height: 100%;
object-fit: scale-down;
/* object-position: 20% 20%; */
}
.box6 img {
width: auto;
height: auto;
}
</style>
</head>
<body>
<div class="contain">
<div class="box1">
<img src="./1.jpg" alt="">
</div>
<div class="box2">
<img src="./1.jpg" alt="">
</div>
<div class="box3">
<img src="./1.jpg" alt="">
</div>
<div class="box4">
<img src="./1.jpg" alt="">
</div>
<div class="box5">
<img src="./1.jpg" alt="">
</div>
<div class="box6">
<img src="./1.jpg" alt="">
</div>
</div>
</body>
</html>
最后,注意目前IE应该还不支持object-fit和object-position属性