CSS背景圖片的寬高設(shè)置

在CSS中，我們可以使用width和height屬性來設(shè)置背景圖片的寬度和高度，這兩個屬性可以接受像素、百分比或其他長度單位作為值。

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

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

如果我們想要將背景圖片設(shè)置為寬度和高度都為50%，我們可以這樣寫：

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

如果圖片的長寬比與設(shè)置的長寬比不匹配，那么圖片可能會被拉伸或壓縮，為了避免這種情況，我們可以使用background-size屬性來設(shè)置背景圖片的大小，同時保持其原始的長寬比：

div {
  width: 100px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover; /* 圖片將被縮放以覆蓋整個元素 */
}

這樣，無論圖片的長寬比如何，它都將被縮放以覆蓋整個元素，而不會拉伸或壓縮。