object-fit:
fill（不保持纵横比缩放图片，使图片完全适应）
contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
none（保持图片宽高不变）
1.png
2.png
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- object-fit:
fill（不保持纵横比缩放图片，使图片完全适应）
contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
none（保持图片宽高不变）
-->
<style>
img{
background-color: yellow;
width: 400px;
height: 200px;
}
#div1 img{
object-fit: fill;
}
#div2 img{
object-fit: contain;
}
#div3 img{
object-fit: cover;
}
#div4 img{
object-fit: none;
}
</style>
</head>
<body>
默认值
<div id="div0">
<img src="./bilibili.png">
</div>
<br>
fill（不保持纵横比缩放图片，使图片完全适应）
<div id="div1">
<img src="./bilibili.png">
</div>
<br>
contain（保持纵横比缩放图片，使图片的长边能完全显示出来）
<div id="div2">
<img src="./bilibili.png">
</div>
<br>
cover（保持纵横比缩放图片，只保证图片的短边能完全显示出来）
<div id="div3">
<img src="./bilibili.png">
</div>
<br>
none（保持图片宽高不变）
<div id="div4">
<img src="./bilibili.png">
</div>
</body>
</html>
网友评论