CSS —— 背景图片填满DIV、鼠标滑过放大图片

1、让背景图片填满DIV
应用background-size属性可以设置背景图片填满整个div，background-size取值及解释如下：

（1）background-size:cover

MDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪）
示例：

<div class="case">
</div>

.case {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('~static/images/bg1.jpg');
}

背景图片填满了div。

（2）background-size:contain

MDN文档解释说明：缩放背景图片以完全装入背景区，可能背景区部分空白。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，空区域填充背景色）
示例：

<div class="case">
</div>

.case {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('~static/images/bg1.jpg');
}

右侧空白，填充了背景色白色。

(3）background-size:width-value,height-value;

取值为固定大小、百分比和auto三种。固定大小就是写死；auto就是以背景图片的比例缩放背景图片。
百分比的MDN文档解释说明：指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框，不能为负值。
示例：

<div class="case">
</div>

.case {
  background-repeat: no-repeat;
  background-size: 400px 300px;
  background-image: url('~static/images/bg1.jpg');
}

2、背景区 background-attachment: fixed

当background-attachment值为fixed的时候，背景区为浏览器可视区（即视口），不包括滚动条。

分析及总结：

假设选作背景的图片尺寸为 260×234，则宽高比为260/234 = 1.11，一div的宽高为 200×200。
分析：
contain—— contain要保持宽高比将图片完全放入div中，div为 200x200。原图为 260x234，所以放入div，宽260—>200，那么高就得200/宽高比（1.11）=180，所以底部会有空白。
cover—— cover与contain完全放入相反，它要求完全覆盖。所以要覆盖就要从更小的高计算，高 234—>200，宽就等于200x1.11 = 222，因此，图片右侧会被裁剪掉一部分。
auto—— auto是原图大小放入。

3、鼠标划过元素，图片被放大

<div class="div">
  <img class="img" src="static/picture/17563_j7vbbpru.jpg"/>
</div>

.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);
}

鼠标未移入：

鼠标移入后：