CSS背景圖片大小設(shè)置

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

如果我們想要將背景圖片設(shè)置為寬度為200像素，高度為自動(dòng)縮放，我們可以這樣寫：

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

如果我們想要將背景圖片設(shè)置為高度為300像素，寬度為自動(dòng)縮放，我們可以這樣寫：

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

CSS還提供了cover和contain兩個(gè)關(guān)鍵字，它們可以自動(dòng)縮放圖片以覆蓋或包含元素。

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

上面的代碼會(huì)將背景圖片自動(dòng)縮放并覆蓋整個(gè)div元素。

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

上面的代碼會(huì)將背景圖片自動(dòng)縮放并保持其原始寬高比，確保圖片完全包含于div元素內(nèi)。