在CSS中,可以使用background-size
屬性來設(shè)置背景圖片的大小,該屬性接受兩個值,分別是寬度和高度,或者可以使用關(guān)鍵詞contain
和cover
來自動縮放圖片以適應(yīng)容器的大小。
要將背景圖片設(shè)置為容器寬度和高度的50%,可以使用以下代碼:
div { background-image: url('image.jpg'); background-size: 50% 50%; }
如果要將圖片縮放以適應(yīng)容器的寬度,并保持原始高度不變,可以使用以下代碼:
div { background-image: url('image.jpg'); background-size: 100% auto; }
contain
和cover
關(guān)鍵詞也可以用來自動縮放圖片。contain
關(guān)鍵詞會將圖片縮放***完全適應(yīng)容器的大小,而cover
關(guān)鍵詞則會使圖片覆蓋整個容器,但可能會有部分圖片被裁剪。
要將圖片設(shè)置為完全適應(yīng)容器的大小,可以使用以下代碼:
div { background-image: url('image.jpg'); background-size: contain; }
需要注意的是,如果圖片的長寬比與容器的長寬比不一致,那么圖片可能會被拉伸或壓縮,為了避免這種情況,建議在設(shè)置背景圖片大小前先確保圖片的長寬比與容器的長寬比一致。