CSS中背景圖大小設(shè)置詳解

在CSS中，我們可以使用background-size屬性來設(shè)置背景圖的大小，這個屬性接受兩個值，分別是寬度和高度，如果我們只設(shè)置一個值，那么另一個值會自動縮放以保持原始圖像的寬高比。

下面是一些示例代碼，展示如何設(shè)置背景圖的大?。?/p>

1、設(shè)置背景圖的寬度為200px，高度自動縮放：

div {
  background-image: url('image.jpg');
  background-size: 200px;
}

2、設(shè)置背景圖的高度為100px，寬度自動縮放：

div {
  background-image: url('image.jpg');
  background-size: 100px;
}

3、設(shè)置背景圖的寬度為50%，高度自動縮放：

div {
  background-image: url('image.jpg');
  background-size: 50%;
}

4、設(shè)置背景圖的高度為20%，寬度自動縮放：

div {
  background-image: url('image.jpg');
  background-size: 20%;
}

注意，如果背景圖的大小超過其原始大小，那么圖像可能會被拉伸或壓縮，為了避免這種情況，我們可以使用background-size: cover;來確保背景圖始終覆蓋整個元素，但可能會留下一些空白區(qū)域。background-size: contain;可以確保背景圖始終保持在原始大小內(nèi)，但可能會在元素的某些部分留下空白。