css background-size與背景圖片填滿div

background-size與背景圖片填滿div

在開發中，常有須要將一張圖片做爲一個div的背景圖片充滿div的需求

background-size的取值及解釋

background-size共有三種屬性，分別爲

background-size: cover

MDN文檔解釋說明：縮放背景圖片以徹底覆蓋背景區，可能背景圖片部分看不見。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

這裏的關鍵說明在於標紅的兩個區域，分別是它會保持圖片的寬高比和當圖像和容器具備不一樣的尺寸時，圖像被左/右或頂部/底部裁剪。以後會結合例子說明

background-size: contain

MDN文檔解釋說明：縮放背景圖片以徹底裝入背景區，可能背景區部分空白。A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

這裏的關鍵說明在於標紅的兩個區域，分別是它會保持圖片的寬高比和當圖像和容器具備不一樣的尺寸時，空區域（左/右/上/右）填充背景色。以後會結合例子說明

background-size: width-value,height-value;

分爲固定大小和百分比和auto，固定大小就是寫死；auto就是以背景圖片的比例縮放背景圖片。。

百分比的的MDN文檔解釋說明<percentage> 值，指定背景圖片相對 背景區（background positioning area）的百分比。 背景區由background-origin設置，默認爲盒模型的內容區與內邊距，也可設置爲只有內容區，或者還包括邊框。若是attachment 爲fixed，背景區爲瀏覽器可視區（即視口），不包括滾動條。不能爲負值。

實驗及聲明

此次選用魯殿做爲背景圖，這張圖的尺寸是260*234，寬高比爲260/234 ≈ 1.11

---

假設一div的寬高爲200*200，下面測試中左爲表現圖，右爲原圖

background-size: contain

background-size: cover

background-size: auto (auto)

background-size: 100% 100%

分析及解釋：首先contain是不行的，原理在於contain要保持寬高比將圖片徹底放入div中，div爲200×200。原圖爲260×234，因此爲了放入div，寬260→200，那麼高就得200/寬高比(1.11) = 180，因此會有下面的空白。
再其次，cover在這個時候也是不符合要求的，雖然看起來貌似符合要求，可是與原圖是有差異的嗎，緣由在於cover與contain徹底放入相反，它要求徹底覆蓋。因此要覆蓋就要從更小的高計算。高234→200，寬就等於200×1.11 = 222，圖像就會被右部裁剪掉一部分。
再再其次，auto是原圖大小也是不符合的。

因此， background-size: 100%, 100%;是符合需求的。按照div的大小進行計算

其餘各類大小div與各類大小的圖片搭配請參照上述說明自行分析。
我的建議這種需求都使用background-size: 100%, 100%;