CSS 图片廊

以下是一份关于 CSS 图片廊（Image Gallery） 的中文讲解与示例，涵盖常见布局、响应式设计、悬停效果，以及纯 CSS 灯箱（Lightbox）实现思路。

---

一、基本网格布局（Grid）

利用 CSS Grid 快速搭建等宽等高或瀑布流式的图片廊。

HTML 结构

<div class="gallery-grid">
  <div class="item"><img src="img1.jpg" alt=""></div>
  <div class="item"><img src="img2.jpg" alt=""></div>
  <div class="item"><img src="img3.jpg" alt=""></div>
  <!-- 更多 .item -->
</div>

CSS 样式

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

.gallery-grid .item {
  overflow: hidden;
}

.gallery-grid .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.gallery-grid .item:hover img {
  transform: scale(1.1);
}

• auto-fill + minmax：自动填满行，高度自适应。
• object-fit: cover：保持图片比例填满容器，不变形。
• 悬停放大效果：transform: scale(1.1)。

---

二、弹性盒子布局（Flex）

Flex 也能实现简单的响应式图片廊。

CSS 示例

.gallery-flex {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}

.gallery-flex .item {
  flex: 1 0 21%; /* 约 5 列布局 */
  margin: 5px;
  overflow: hidden;
}

.gallery-flex .item img {
  width: 100%;
  display: block;
  transition: opacity 0.3s;
}

.gallery-flex .item:hover img {
  opacity: 0.8;
}

• flex: 1 0 21%：基础宽度 21%，可增长不收缩，五栏左右。
• 外层负边距＋内层正边距，保持间距一致。

---

三、瀑布流布局（Masonry）

纯 CSS 无法自动错位排版，但可用列（column）模拟简单瀑布流：

.masonry {
  column-count: 3;
  column-gap: 10px;
}

.masonry .item {
  break-inside: avoid;
  margin-bottom: 10px;
}

.masonry .item img {
  width: 100%;
  display: block;
}

• column-count：定义列数，图片按列填充，高度自动错位。
• break-inside: avoid：避免元素被拆分到多列。

---

四、响应式优化

在不同视口下调整列数或每项宽度：

@media (max-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

或在 Flex 布局中调整 flex-basis：

@media (max-width: 600px) {
  .gallery-flex .item { flex: 1 0 46%; }
}
@media (max-width: 400px) {
  .gallery-flex .item { flex: 1 0 100%; }
}

---

五、图片悬停叠加文字与按钮

.item {
  position: relative;
}

.item .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.item:hover .overlay {
  opacity: 1;
}

<div class="item">
  <img src="img1.jpg" alt="">
  <div class="overlay">查看详情</div>
</div>

---

六、纯 CSS 灯箱（Lightbox）示例

利用隐藏的复选框或 :target 伪类实现无 JS 灯箱。

HTML（:target 方案）

<div class="gallery-grid">
  <a href="#img1"><img src="thumb1.jpg" alt=""></a>
  <!-- 更多缩略图 -->
</div>

<div id="img1" class="lightbox">
  <a href="#" class="close"></a>
  <img src="img1_large.jpg" alt="">
</div>

CSS

.lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.lightbox:target {
  display: flex;
}

.lightbox .close {
  position: absolute;
  top: 20px; right: 20px;
  width: 30px; height: 30px;
  background: #fff;
  text-decoration: none;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

• 缩略图链接到对应 #id，打开时 :target 触发显示灯箱。
• 点击关闭按钮（链接到 #）回到顶部，隐藏灯箱。

---

七、最佳实践与注意事项

1. 图片优化：使用合适尺寸与格式（WebP/AVIF）减少加载。
2. 懒加载：给 <img loading="lazy"> 提升性能。
3. 无障碍：为 alt 属性添加描述，灯箱关闭按钮加 aria-label。
4. 兼容性：Grid、column 或 :target 在老旧浏览器需谨慎；可降级为 Flex 或 JS。
5. 响应式：始终测试不同设备，确保间距、列数、文字大小合适。

---

这样，你即可快速搭建出样式丰富、响应式良好的纯 CSS 图片廊。如需更多交互（如滑动翻页、手势支持）或与框架（React/Vue）结合的示例，也可以告诉我！