引导图像缩略图 - CSS

在许多 Web 应用程序中，图像缩略图有时比完整大小版本更有用。 它们可以在图片库和滚动式图像查看器中提供视觉效果和用户友好性。 在本篇文章中，我们将介绍如何使用 CSS 来创建引导图像缩略图。

基本缩略图模板

要创建图像缩略图，我们需要一个包含图像的 HTML 结构。 这个结构可以是一个单独的 <img> 标签，也可以是一个包含多个图像的相册。 在本篇文章中，我们将使用以下 HTML 结构作为缩略图模板：

<div class="thumbnail">
    <img src="path-to-image.jpg">
    <div class="caption">Image Caption</div>
</div>

该模板包含一个 <div> 元素，一个 <img> 元素和一个 <div> 元素，用于放置图像标题。 我们将使用 CSS 来设置缩略图的样式。

缩略图样式

下面是基本的 CSS 样式，用于设置缩略图的大小和相册布局：

.thumbnail {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}
 
.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s ease-out;
}
 
.thumbnail img:hover {
    transform: scale(1.1);
}
 
.thumbnail .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 5px;
    text-align: center;
}

.thumbnail 样式

首先，我们设置了 .thumbnail 类的宽度为 100％，高度为自适应。 我们还将其位置设置为相对位置，并为其启用了溢出隐藏功能。

现在，我们需要设置图片属性，以便它适合缩略图框。 我们设置了图片的宽度和高度为 100％，这样它就会完全填充缩略图的区域。 我们还使其具有“ display: block”属性，这将使它成为其容器的块元素。

最后，我们添加了一个鼠标悬停效果。 在该效果下，图像将缩放到 1.1 倍大小。

.caption 样式

为了在缩略图上方添加标题，我们需要使用相对于 .thumbnail 位置绝对定位的 CSS。 我们设置其底部位置为 0，左右位置为 0，并将其背景颜色设置为深灰色。 最后，我们设置了其颜色为白色，并添加了一些内边距和文本对齐设置。

结论

现在，您已经了解了如何使用 CSS 来创建图像缩略图。 您可以使用相同的样式模板创建一个相册，其中包含多个缩略图。 只需在此基本模板中添加更多的 .thumbnail 元素和更多的 <img> 和 <div> 元素即可。

希望这篇文章能帮助您创建出美观的相册，给用户最佳的视觉体验。