一、background-size：設定背景圖像的尺寸。
瀏覽器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;
基本語法：background-size: length | percentage | cover | contain;
1：length
該屬性值是設置背景圖像的寬度和高度的，第一個值是寬度，第二個值是設置高度的。如果只設置第一個值，那么第二個值會自動轉換為 “auto”;
2：percentage
該屬性是以父元素的百分比來設置圖片的寬度和高度的，第一個值是寬度，第二個值是高度。如果只設置一個值，那么第二個值會被設置為 “auto”;
3：cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
4：contain
把圖像擴展至最大尺寸，以使寬度和高度完全適應內容區域。
理解：
背景圖需給父元素設置固定寬高。
length、percentage可以理解為手動設置背景圖的尺寸。length是具體值，percentage是父元素百分比（圖片寬高比會變化）
cover 如果圖片不足以覆蓋背景區域，延展圖片使其完全覆蓋背景區域。（圖片寬高比不變）
contain 延展圖片，使其一邊到達區域邊緣即停止。（圖片寬高比不變）如果寬度先到達，等同於background-size:100% auto
cover與contain的異同：
相同：都不改變圖片比例，延展圖片。
不同：contain延展到一邊到達區域邊緣即停止，cover會繼續延展至另一邊也到達區域邊緣。
二、圖片自適應
有些場景想要圖片高度自適應，比如網站頭部寬度100%的banner圖，如果用背景圖，要么變形，要么覆蓋不全。
可以通過使用圖片，並設置寬度100%來自適應解決。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .column { width: 100%; } .figure { width: 100%; } </style> </head> <body> <div class="column"> <img class="figure" src="img/1.jpg"/> </div> </body> </html>
三、響應式背景圖（效果等同於二、圖片自適應）
原理：使用padding-top:(percentage)把背景區域撐開，實現響應式背景圖片
padding-top = （高度 / 寬度 ）＊ 100%
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .column { width: 100%; } .figure { padding-top: 30.85%;/* (寬/高) */ background: url("img/1.jpg") no-repeat; background-size: cover;/* 背景鋪滿元素 */ background-position: center;/* 兼容ie8及以下 */ } </style> </head> <body> <h3>使用padding-top實現響應性圖片</h3> <div class="column"> <div class="figure"></div> </div> </body> </html>