css文件 如何使背景圖片大小適應div的大小


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

background-size有3個屬性:

  1. auto:當使用該屬性的時候,背景圖片將保持100% 的大小顯示,不進行任何縮放。超過div的多余部分將被隱藏。當圖片過小時,圖片會自動平鋪。這種屬性通常用來做重復性的背景或者做半透明圖片背景。 可以設置x和y的值,表示寬和高,設置寬度后,如果不設置高度,那么默認會是auto。

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

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

  4.  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM