CSS 图片廊

图片廊（Image Gallery）是相册、商品页最常见的展示形式：多张图片配上说明文字，整齐地排列成网格。它不依赖任何 JavaScript，纯 HTML + CSS 就能实现。讲师带你一步步搭出可换行、可悬停放大的图片廊。

图片廊的 HTML 结构

每张图用一个容器包起来：图片、说明文字各占一块，便于分别控制样式：

<div class="gallery">
  <div class="item">
    <img src="photo1.jpg" alt="风景">
    <div class="desc">山间日出</div>
  </div>
  <div class="item">
    <img src="photo2.jpg" alt="城市">
    <div class="desc">都市夜景</div>
  </div>
</div>

图片廊的基础样式

图片占满容器宽度，说明文字与边框一起组成卡片外观：

.item {
  width: 200px;         /* 固定卡片宽度 */
  border: 1px solid #ddd;
  margin: 10px;
  float: left;          /* 让卡片横向排列 */
}
.item img {
  width: 100%;          /* 图片撑满卡片 */
  height: auto;
}
.desc {
  padding: 8px;
  text-align: center;
  font-size: 14px;
}

运行效果：卡片并排显示，图片在上、说明文字在下，套着灰色细边框，像整齐的小相框。

悬停边框效果

鼠标移到卡片上时给边框加高亮，交互更精致：

.item:hover {
  border: 1px solid #777;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

运行效果：悬停时卡片边框加深、底部浮起阴影，像被"拎"起来一样。

图片放大动效

配合 transform 与 transition，悬停时图片可以平滑放大：

.item img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;  /* 平滑过渡 */
}
.item:hover img {
  transform: scale(1.1);            /* 放大到 1.1 倍 */
}

运行效果：鼠标移入时图片平滑放大；给 .item 加 overflow: hidden 可裁掉溢出部分。

自适应换行

窗口变窄时让卡片自动换行，用百分比宽度实现简易响应式：

.item {
  width: 24%;           /* 一行放 4 张，留出边距余量 */
  box-sizing: border-box;
  margin: 0.5%;
}
@media (max-width: 700px) {
  .item { width: 48%; }  /* 窄屏时一行只放 2 张 */
}

运行效果：宽屏一行 4 张，屏幕变窄后自动变成一行 2 张，手机上依然整齐。

小结

图片廊 = 结构清晰的 img + desc 卡片 + 浮动排布：用 float 加百分比宽度实现换行网格，用 :hover 加边框与阴影提升交互，再配合 transform 与媒体查询做放大和响应式。掌握这套写法，相册页、商品列表都能顺手做出来。