当前位置：首页 > CSS

css制作照片墙

2026-01-28 12:17:35CSS

使用 CSS Grid 布局

通过 CSS Grid 可以快速创建响应式照片墙布局。定义一个容器并设置 display: grid，通过 grid-template-columns 控制列数和宽度。

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

<div class="photo-wall">
  <img src="photo1.jpg" alt="Photo 1">
  <img src="photo2.jpg" alt="Photo 2">
  <!-- 更多图片 -->
</div>

使用 Flexbox 布局

Flexbox 适合需要灵活对齐的照片墙。设置容器为 display: flex 并使用 flex-wrap 实现换行。

css制作照片墙

.photo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 15px;
}
.photo-wall img {
  width: 180px;
  height: 180px;
  object-fit: cover;
}

添加悬停效果

为图片增加交互效果，如缩放和阴影。

css制作照片墙

.photo-wall img {
  transition: transform 0.3s, box-shadow 0.3s;
}
.photo-wall img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

不规则排列

通过调整个别图片的尺寸实现错落有致的效果。

.photo-wall img:nth-child(3n) {
  grid-row: span 2;
  grid-column: span 2;
}

响应式设计

使用媒体查询适应不同屏幕尺寸。

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