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

鼠標未移入：

鼠標移入後：