基础 CSS 缩略图

在网页设计中，缩略图是一种常用的图片预览方式。它可以通过缩小原图尺寸，使用户可以快速浏览多张图片。CSS缩略图是用CSS样式控制图片缩放大小。本文将介绍如何使用CSS来制作基础的缩略图。

HTML 结构

首先需要创建一个包含图片的HTML结构。在这个例子中，我们将使用一张名为 nature.jpg 的图片，存放在本地。

<div class="thumbnail">
  <img src="nature.jpg">
</div>

CSS 样式

CSS样式是用来控制缩略图尺寸和外观的。我们可以通过设置父元素的宽度和高度来确定缩略图的大小，然后使用 object-fit 属性来调整图片的缩放方式。

.thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在上面的例子中，.thumbnail 为包含图片的父元素。通过 width 和 height 属性，我们将缩略图的尺寸设为200x200像素，并使用 overflow: hidden 在父元素中隐藏超出部分的图片。

对于 .thumbnail img ，我们将图片尺寸设为100% ，使其填充整个父元素空间。使用 object-fit: cover 属性可以保持图片原始比例，并将其自适应缩略图的大小。

完整代码

<div class="thumbnail">
  <img src="nature.jpg">
</div>

.thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

总结

通过HTML和CSS，我们可以轻松制作出基础的缩略图。通过定制CSS样式，缩略图的外观和尺寸可以自由调整，形成多种不同的效果。