在網頁開發中，我們通常需要顯示大量的圖片。在這些圖片數量較多時，可能需要使用縮略圖來幫助用戶快速瀏覽和選擇需要查看的圖片。 為了實現圖片縮略圖的顯示，我們需要應用 CSS 樣式。其中，最常用的方法就是使用 CSS 中的 background-image 屬性。我們可以為每個圖片設定一個 CSS 樣式，并在其背景中添加對應的縮略圖。 下面是示例代碼：

.thumbnail {
display: inline-block;
width: 100px;
height: 100px;
background-size: cover;
margin: 5px;
}
.thumbnail-1 {
background-image: url('image-1.jpg');
}
.thumbnail-2 {
background-image: url('image-2.jpg');
}
.thumbnail-3 {
background-image: url('image-3.jpg');
}

以上代碼中，我們為每個縮略圖添加了一個 .thumbnail 的 CSS 類，設定了它們的寬度、高度、背景大小及間距。而對于每個縮略圖的具體圖片，我們則使用 background-image 屬性指定了對應的地址。 除了使用 background-image 屬性，我們還可以使用 img 標簽來顯示縮略圖。不過，這種方法通常需要額外的 JavaScript 支持。 有些 JavaScript 庫，如 jQuery 或 Bootstrap，提供了較為便捷的縮略圖顯示方法。它們可以自動為大圖生成縮略圖，并將其顯示在特定的容器中。 無論使用何種方法，都要注意設計合理的縮略圖尺寸，使其既可以快速加載，又不會占用過多的空間。另外，最好將縮略圖與原圖存儲在不同的位置，以免占用過多的服務器存儲空間。 總之，通過應用 CSS 樣式，我們可以輕松地實現圖片縮略圖的顯示。合理使用縮略圖，可以提高頁面的性能和用戶體驗，同時也為網站訪問量的提升貢獻一份力量。