HTML5照片墙制作与创意布局技巧

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 10px;
}
.photo-wall img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}
.photo-wall img:hover {
transform: scale(1.05);
}

.photo-wall-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}
.photo-wall-flex img {
flex: 1 1 calc(33.333% - 10px);
height: 180px;
object-fit: cover;
border-radius: 8px;
}
.item-tall {
flex: 1 1 calc(33.333% - 10px);
height: 370px;
}
.item-wide {
flex: 1 1 calc(66.666% - 10px);
height: 180px;
}

.photo-wall img {
  /* 原有样式 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.photo-wall img:hover {
transform: scale(1.08) rotate(1deg);
z-index: 1;
box-shadow: 0 12px 20px rgba(0,0,0,0.2);
}

.photo-wall img {
  filter: brightness(0.9) contrast(1.1);
}
.photo-wall img:hover {
filter: brightness(1.1) contrast(1.2) saturate(1.3);
}

@media (max-width: 768px) {
  .photo-wall,
  .photo-wall-flex {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
.photo-wall-flex img {
height: 140px;
}
.item-tall, .item-wide {
flex-basis: 100%;
height: 200px;
}
}