使用 background-size 調整背景圖片大小
background-size CSS 屬性允許您調整元素的背景圖片大小，透過指定圖片的寬度和/或高度來覆蓋其預設的全尺寸平鋪行為。透過這樣做，您可以根據需要向上或向下縮放圖片。
平鋪大圖片
讓我們考慮一張大圖片，一張 2982x2808 的 Firefox 標誌圖片。我們希望（出於某種可能涉及糟糕的網站設計的奇怪原因）將這張圖片的四個副本平鋪到一個 300x300 畫素的元素中。為此，我們可以使用 150 畫素的固定 background-size 值。
HTML
html
<div class="tiledBackground"></div>
CSS
css
.tiledBackground {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}
結果
拉伸圖片
您還可以指定圖片的水平和垂直大小，如下所示
css
background-size: 300px 150px;
結果如下所示
放大圖片
另一方面，您可以在背景中放大圖片。這裡我們將一個 32x32 畫素的圖示放大到 300x300 畫素
css
.square2 {
background-image: url("favicon.png");
background-size: 300px;
width: 300px;
height: 300px;
border: 2px solid;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
如您所見，除了圖片檔名，CSS 實際上是基本相同的。
特殊值：contain 和 cover
除了 <length> 值，background-size CSS 屬性還提供了兩個特殊的尺寸值：contain 和 cover。讓我們來看看這些。
contain
contain 值指定，無論包含框的大小如何，背景圖片都應縮放，使其每條邊儘可能大，同時不超過容器相應邊的長度。嘗試調整下面的示例大小以檢視其效果。
HTML
html
<div class="bgSizeContain">
<p>Try resizing this element!</p>
</div>
CSS
css
.bgSizeContain {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: contain;
width: 160px;
height: 160px;
border: 2px solid;
resize: both;
overflow: scroll;
}
結果
cover
cover 值指定背景圖片應調整大小，使其儘可能小，同時確保兩個維度都大於或等於容器的相應大小。嘗試調整下面的示例大小以檢視其效果。
HTML
html
<div class="bgSizeCover">
<p>Try resizing this element!</p>
</div>
CSS
css
.bgSizeCover {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: cover;
width: 160px;
height: 160px;
border: 2px solid;
resize: both;
overflow: scroll;
}