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

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

如果我們想要將背景圖的寬度設(shè)置為300像素，高度設(shè)置為200像素，我們可以這樣寫：

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

如果我們想要將背景圖的寬度設(shè)置為覆蓋整個(gè)容器，而高度設(shè)置為自動(dòng)縮放，我們可以這樣寫：

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

在這個(gè)例子中，cover關(guān)鍵字會(huì)將背景圖縮放***足夠大，以覆蓋整個(gè)容器，如果背景圖的寬高比與容器的不同，那么背景圖可能會(huì)被裁剪。

我們也可以使用contain關(guān)鍵字來(lái)設(shè)置背景圖的大小，它會(huì)確保背景圖始終被完整地顯示出來(lái)，不會(huì)被裁剪，但是需要注意的是，如果背景圖的寬高比與容器的不同，那么背景圖可能會(huì)留有一些空白區(qū)域。

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

CSS提供了多種方法來(lái)設(shè)置背景圖的大小，我們可以根據(jù)自己的需求選擇***適合的方法。