CSS Background-Size 屬性小記

今天在研究用 CSS 實現背景圖片鋪滿瀏覽器窗口的方法，先是在 StackOverflow 上找到一個方法 show full height background image 來實現背景圖填滿瀏覽器高度的需求，可是效果並很差，窗口底部會有一塊空白區域，而且右側有滾動條，在前端羣裏討論了一番以後，發現用 background-size: cover; 語句便可解決該問題。在 W3Schools 上查看了一下該屬性的說明，在 Background-Size Property Values 這個頁面中，能夠查看不一樣屬性值會有什麼樣的表現，整理以下：

屬性值	表現方式
auto	背景圖的原始尺寸
initial	背景圖的原始尺寸
*px *px	指定的尺寸
*px	指定的寬度，並保持圖片原始高寬比
100% 100%	撐滿填充區域的寬和高
X%	相對於填充區域的寬度比例，並保持圖片原始高寬比
cover	撐滿填充區域的寬度，並保持圖片原始高寬比
contain	撐滿填充區域的高度，並保持圖片原始高寬比

對比上面表格中的幾種屬性，能夠發現 100% 和 cover 兩種屬性實現的效果是同樣的，auto 和 initial 實現的效果是同樣的。

最後爲了實現背景圖片鋪滿瀏覽器窗口的需求，將背景圖裁剪成了 16:10 的比例，而且用 cover 屬性，這樣就能夠知足大部分的應用場景了。