应用-size属性可以设置背景图片填满整个div，-size取值及解释如下：
（1）-size:cover
MDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪）
示例：
.case {
background-repeat: no-repeat;
background-size: cover;
background-image: url('~static/images/bg1.jpg');
}
背景图片填满了div。
（2）-size:
MDN文档解释说明：缩放背景图片以完全装入背景区网页背景图片 css，可能背景区部分空白。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，空区域填充背景色）
示例：
.case {
background-repeat: no-repeat;
background-size: contain;
background-image: url('~static/images/bg1.jpg');
}
右侧空白，填充了背景色白色。
(3）-size:width-value,-value;
取值为固定大小、百分比和auto三种。固定大小就是写死；auto就是以背景图片的比例缩放背景图片。
百分比的MDN文档解释说明：指定背景图片相对背景区的百分比。背景区由-设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框，不能为负值。
示例：
.case {
background-repeat: no-repeat;
background-size: 400px 300px;
background-image: url('~static/images/bg1.jpg');
}
2、背景区 -: fixed
当-值为fixed的时候，背景区为浏览器可视区（即视口），不包括滚动条。
分析及总结：
假设选作背景的图片尺寸为 260×234，则宽高比为260/234 = 1.11，一div的宽高为 200×200。
分析：
—— 要保持宽高比将图片完全放入div中网页背景图片 css，div为 。原图为 ，所以放入div网页背景图片 css CSS —— 背景图片填满DIV、鼠标滑过放大图片，宽260—>200，那么高就得200/宽高比（1.11）=180，所以底部会有空白。
cover—— cover与完全放入相反，它要求完全覆盖。所以要覆盖就要从更小的高计算，高 234—>200，宽就等于200x1.11 = 222，因此，图片右侧会被裁剪掉一部分。
auto—— auto是原图大小放入。
3、鼠标划过元素，图片被放大
.div{
width: 400px;
height: 400px;
overflow: hidden; /*防止图片放大后溢出div*/
}
.img{
max-width: 400px;
max-height: 400px;
transition: all 0.3s ease-out; /*ease-out 减速、慢慢结束*/
-webkit-transition: all 0.3s ease-out;
}
.div:hover .img{
z-index: 5;
transform: scale(1.5); /*把图片放大1.5倍*/
-webkit-transform: scale(1.5);
}
鼠标未移入：
鼠标移入后：
文章来源:https://blog.csdn.net/miss_zxm/article/details/84639768