CSS 圖片縮略圖是一個非常常用的功能。例如，在圖片展示網站上，當用戶想要查看所有圖片時，會出現縮略圖。這個功能有很大的好處，能夠使頁面加載更快，因為縮略圖的大小比原始圖片要小得多。在本文中，我們將學習如何使用 CSS 創建縮略圖。 要創建一個縮略圖，首先需要將圖片調整為適當的大小。在 CSS 中，使用 max-width 和 max-height 屬性來縮小圖片。例如，下面的 CSS 代碼將圖片的最大寬度設置為200像素。同時，如果圖片的高度大于200像素，它會自動等比縮小到200像素。

img {
max-width: 200px;
max-height: 200px;
}

然后，我們需要使用 CSS 的 background 屬性來添加一個縮略圖。

.thumbnail {
width: 200px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
}

這個縮略圖將顯示名為 image.jpg 的圖片，并自動縮小為200像素。我們還設置了縮略圖的寬度和高度，使其與圖片大小相同。background-size 屬性設置為 cover，表示將圖像自適應于圖像框，同時保持縱橫比。 你還可以將多個縮略圖放在一起，例如在一個表格或列表中。要這樣做，我們可以使用 CSS 的 display: inline-block 屬性，并使用 margin 屬性來指定每個縮略圖之間的間距。

.thumbnail {
display: inline-block;
width: 200px;
height: 200px;
background-size: cover;
margin: 10px;
}

這些縮略圖將顯示在行中，并且每個縮略圖之間有10像素的間距。 總之，CSS 圖片縮略圖是一個非常有用的功能，可以幫助我們在網頁上快速加載大量圖片。通過使用 CSS 的 max-width 和 max-height 屬性來調整圖片大小，以及使用 background 屬性創建縮略圖，您可以輕松地實現這一功能。