在CSS中,我們可以使用background-size
屬性來(lái)調(diào)整背景圖片的大小,這個(gè)屬性接受兩個(gè)值:寬度和高度,你可以分別指定寬度和高度,或者只指定一個(gè)值,另一個(gè)值會(huì)自動(dòng)縮放以保持原始圖片的寬高比。
假設(shè)你有一個(gè)背景圖片,你希望將其寬度調(diào)整為300像素,高度自動(dòng)縮放:
body { background-image: url('your-image-url-here'); background-size: 300px auto; }
如果你希望高度和寬度都自動(dòng)縮放,可以使用contain
或cover
關(guān)鍵字:
body { background-image: url('your-image-url-here'); background-size: contain; /* or cover */ }
contain
關(guān)鍵字會(huì)保持圖片的原始寬高比,而cover
關(guān)鍵字則會(huì)嘗試填充整個(gè)元素區(qū)域,可能會(huì)裁剪一部分圖片。
如果你希望背景圖片填充整個(gè)元素,但不裁剪圖片,可以使用100% 100%
:
body { background-image: url('your-image-url-here'); background-size: 100% 100%; }
這樣,背景圖片就會(huì)填充整個(gè)元素,而不會(huì)裁剪任何部分,希望這些示例能幫助你調(diào)整背景圖片的大小。