在CSS中,我們可以使用background-size
屬性來設(shè)置背景圖片的大小,這個(gè)屬性接受兩個(gè)值:寬度和高度,你可以分別指定寬度和高度,或者只指定一個(gè)值,另一個(gè)值會(huì)自動(dòng)縮放以保持原始圖片的寬高比。
如果你有一個(gè)背景圖片,你希望它填充整個(gè)容器,但不改變圖片的寬高比,你可以這樣寫:
div { background-image: url('your-image-url'); background-size: cover; }
這里的cover
關(guān)鍵字表示背景圖片應(yīng)該覆蓋整個(gè)容器,但不改變圖片的寬高比,這樣,背景圖片就會(huì)填充整個(gè)容器,而且看起來不會(huì)變形。
如果你希望背景圖片完全填充容器,并且不介意圖片變形,你可以使用contain
關(guān)鍵字:
div { background-image: url('your-image-url'); background-size: contain; }
這里的contain
關(guān)鍵字表示背景圖片應(yīng)該完全填充容器,即使這意味著圖片會(huì)被裁剪和縮放。
你也可以直接指定寬度和高度:
div { background-image: url('your-image-url'); background-size: 500px 300px; }
這里的500px
和300px
分別表示圖片的寬度和高度,注意,這里的單位是像素(px),你也可以使用其他單位,如百分比(%)、em等。
使用background-size
屬性可以很方便地設(shè)置背景圖片的大小,無論你是希望填充整個(gè)容器還是保持原始圖片的寬高比。