編碼的世界 / 優質文選 / 生涯

css3使用background-size設置背景圖片大小

2022年7月05日
-   

background-size設置背景圖片大小：
  • 背景圖大小設置（background-size）必須寫在背景圖引入的下
  • 百分比相對於容器的寬和高 （充滿容器 很可能圖片變形）

    • 		div {
     width: 400px;
     height: 400px;
     border: 1px solid #000;
     background: url("./img/jiufen.jpg") 0 0 no-repeat;
     background-size: 100% 100%;
    




     }


  • background-size: cover 圖片等比縮放，當寬高的其中一個剛好充滿容器，另一個充滿或超出容器 （圖片有可能超出容器 但是圖片一定充滿整個容器）

    • 	div {
     width: 400px;
     height: 400px;
     border: 1px solid #000;
     background: url("./img/jiufen.jpg") 0 0 no-repeat;
     background-size: cover;
     }

    4. background-size: contain 圖片比例不變，等比縮放。當任意寬高其中一個充滿容器 即停止 （圖片全部顯示，但是可能充不滿整個容器）
    	div {
     width: 400px;
     height: 400px;
     border: 1px solid #000;
     background: url("./img/jiufen.jpg") 0 0 no-repeat;
     background-size: contain;
     }

    熱門文章