CSS 图片库

现代 CSS 图片画廊 (Image Gallery)

本教程演示如何使用现代 CSS 技术（如 Flexbox）创建一个响应式图片画廊。我们将重点介绍简洁的 HTML 和高效的 CSS。

CSS，特别是 Flexbox 或 CSS Grid，提供了强大而灵活的方式来创建图片画廊。下面是一个简单的响应式图片画廊示例。

以下图片是画廊的占位符：

使用 Flexbox 构建图片画廊

我们将使用 Flexbox 来排列画廊项目。每个项目将包含一张图片和一段描述。

HTML 结构：

<div class="gallery">
  <figure class="gallery-item">
    <a href="#" target="_blank">
      <img src="klematis_small.jpg" alt="Klematis Flower 1" >
    </a>
    <figcaption class="gallery-caption">Add a description of the image here. This could be about Klematis Flower 1.</figcaption>
  </figure>

  <figure class="gallery-item">
    <a href="#" target="_blank">
      <img src="klematis2_small.jpg" alt="Klematis Flower 2">
    </a>
    <figcaption class="gallery-caption">Description for Klematis Flower 2. More details can be added.</figcaption>
  </figure>

  <figure class="gallery-item">
    <a href="#" target="_blank">
      <img src="klematis3_small.jpg" alt="Klematis Flower 3">
    </a>
    <figcaption class="gallery-caption">This is Klematis Flower 3. It has distinct colors.</figcaption>
  </figure>

  <figure class="gallery-item">
    <a href="#" target="_blank">
      <img src="klematis4_small.jpg" alt="Klematis Flower 4">
    </a>
    <figcaption class="gallery-caption">Klematis Flower 4, a beautiful specimen for the gallery.</figcaption>
  </figure>
</div>

CSS 样式：

.gallery {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行到下一行 */
  gap: 16px; /* 画廊项目之间的间距 */
  padding: 16px;
  justify-content: center; /* 如果项目未填满一行，则居中排列 */
}

.gallery-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin: 0; /* 重置默认的 figure 外边距 */
  background-color: #f9f9f9;
  width: 200px; /* 定义每个项目的宽度 */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column; /* 垂直堆叠图片和说明文字 */
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  display: block; /* 移除图片下方的额外空间 */
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
}

.gallery-item a:hover img {
  opacity: 0.8; /* 悬停时的轻微视觉反馈 */
}

.gallery-caption {
  font-size: 0.9em;
  color: #333;
  text-align: center;
  margin-top: auto; /* 如果图片高度不同，将说明文字推到底部 */
}

说明：

• .gallery：此容器使用 display: flex 来以行的方式排列其子元素（gallery-item 元素）。flex-wrap: wrap 允许空间不足时项目换行。gap 提供项目之间的间距。
• .gallery-item：每个项目是一个 figure 元素，这在语义上很适合图片和说明文字。width 设置了基本尺寸，但 Flexbox 允许它们进行调整。项目内部使用 display: flex 和 flex-direction: column 有助于对齐图片和说明文字。
• .gallery-item img：通过使用 max-width: 100% 和 height: auto 使图片在其容器内具有响应性。
• .gallery-caption：figcaption 为图片提供上下文。margin-top: auto; 是一个巧妙的 Flexbox 技巧，如果项目的图片高度不同，它可以将说明文字推到底部。
• 语义化 HTML：使用 <figure> 和 <figcaption> 比使用通用的 <div> 元素来表示图片及其描述更具语义化。

进一步增强：

• CSS Grid：对于更复杂的二维布局，CSS Grid 可以作为 Flexbox 的替代方案。
• Lightbox 特效：可以添加 JavaScript 来在点击时显示图片的更大版本。
• 响应式断点：使用媒体查询来为不同屏幕尺寸调整 gallery-item 的 width 或列的数量。