1、background-size : 100% 100% 与 cover 和 contain 区别
（1）100% 100% 图片宽度和高度的比例会被改变，填满盒子。
（2）cover 图片宽度和高度比例不变，填满盒子，超出部分会被裁剪。
（3）contain 图片宽度和高度比例不变，容器内至少有一张完整的图，容器留白区，铺不下的再裁掉。
基础素材，如下图片。
bg.png
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图尺寸</title>
<style type="text/css">
.image1{
overflow: hidden;
}
.image100{
background-image: url(bg.png);
background-size: 100% 100%;
width: 300px;
height: 300px;
margin: 0px auto;
float: left;
border: 1px solid red;
margin-right: 20px;
}
.image100-text{
width: 300px;
text-align: center;
float: left;
margin-right: 20px;
}
.imageContain{
background-image: url(bg.png);
background-size: contain;
background-repeat: no-repeat;
width: 300px;
height: 300px;
margin: 0px auto;
border: 1px solid red;
float: left;
margin-right: 20px;
}
.imageContain-text{
width: 300px;
text-align: center;
float: left;
margin-right: 20px;
}
.imageCover{
background-image: url(bg.png);
background-size: cover;
width: 300px;
height: 300px;
margin: 0px auto;
border: 1px solid red;
float: left;
}
.imageCover-text{
width: 300px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="image1">
<div class="image100">
</div>
<div class="imageContain">
</div>
<div class="imageCover">
</div>
</div>
<div class="image2">
<div class="image100-text">background-size: 100% 100%;</div>
<div class="imageContain-text">contain</div>
<div class="imageCover-text">cover</div>
</div>
</body>
</html>
运行效果：
image.png
网友评论