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 属性创建缩略图，您可以轻松地实现这一功能。