1. 程式人生 > >css檔案 如何使背景圖片大小適應div的大小

css檔案 如何使背景圖片大小適應div的大小

對背景圖片設定屬性:background-size:cover;可以實現背景圖片適應div的大小。

background-size有3個屬性:

  1. auto:當使用該屬性的時候,背景圖片將保持100% 的大小顯示,不進行任何縮放。超過div的多餘部分將被隱藏。當圖片過小時,圖片會自動平鋪。這種屬性通常用來做重複性的背景或者做半透明圖片背景。

  2. cover:當使用該屬性時,圖片將被縮放至恰好能覆蓋div,並且圖片被隱藏的部分最少,這種屬性在大圖背景中應用比較廣泛。這點比較難理解,需要結合實踐理解。

  3. contain:當使用該屬性時,圖片被縮放至最大且能被完全展示出來,但是由於圖片的的尺寸比例與div的尺寸比例會有不同,所以當圖片不能蓋住div時,圖片會自動平鋪。