CSS控制背景圖大小的方法

在CSS中，我們可以使用background-size屬性來控制背景圖的大小，這個(gè)屬性可以指定背景圖的寬度和高度，或者只指定一個(gè)值，另一個(gè)值會(huì)自動(dòng)縮放以保持原始縱橫比。

如果我們有一個(gè)背景圖，我們想要將其大小調(diào)整為原始大小的50%，我們可以使用以下CSS代碼：

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

這將使背景圖的寬度和高度都縮小到原始大小的50%，如果我們只想調(diào)整寬度，可以指定一個(gè)值，

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

這將使背景圖的寬度變?yōu)?00像素，高度會(huì)自動(dòng)縮放以保持原始縱橫比，需要注意的是，如果背景圖的原始縱橫比與指定的寬度和高度不匹配，那么背景圖可能會(huì)被拉伸或壓縮，為了避免這種情況，我們可以使用background-size: cover;或background-size: contain;來確保背景圖始終填充整個(gè)容器，或者始終保持在容器內(nèi)部。