在網頁制作中，經常會遇到需要使用小圖片來裝飾頁面的情況，然而有時候我們會遇到圖片顯示不全的問題，今天我們看一下這個問題的解決方法。
首先，我們來看一個例子：在一個div中，我們設置了一個背景圖片，并且指定了寬度和高度，但是當圖片實際大小超過指定的寬度和高度時，圖片就會被截斷，只顯示一部分。

html
<div style="width: 100px; height: 100px; background-image: url('image.png')"></div>

為了解決這個問題，我們需要使用CSS的background-size屬性，它可以控制背景圖片的尺寸和顯示方式。background-size有兩個值，一個是長度值，另一個是關鍵字，常用的有cover和contain。
- cover：通過縮放背景圖像，保留圖像的縱橫比，使圖像完全覆蓋所在區域。這可能意味著圖像的某一邊會超出區域。 - contain：通過縮放背景圖像，保留圖像的縱橫比，使圖像的尺寸足夠小，另外一條邊與區域邊界相接。
接下來，我們來看一下解決方法：

html
<div style="width: 100px; height: 100px; background-image: url('image.png'); background-size: cover;"></div>

以上代碼中，我們加入了background-size: cover;屬性，這樣背景圖像就會被縮放，保留圖像的縱橫比，使圖像完全覆蓋div所在區域。如果想讓圖像的尺寸足夠小，另外一條邊與區域邊界相接，我們可以使用contain關鍵字。
盡管我們使用背景圖片的方式來展示小圖片并不是唯一的方法，但在某些情況下，這種方式會很有用，比如我們需要讓小圖片和文字垂直對齊時，使用background-size可以輕松實現這一點。