如何让不同尺寸图片适配网格布局实现统一大小？

问题出在这两点 #

1. 给图片设了固定width:400px，但外层.gallery只有700px宽，三列网格根本塞不下这么宽的图，直接溢出导致布局乱掉
2. 图片高度不一致，网格行高会被每行最高的图撑开，导致整体布局参差不齐

修复方案（含可点击画廊实现） #

直接调整CSS和HTML结构，解决尺寸问题同时实现可点击交互：

修改后的CSS

.gallery {
  max-width: 1200px; /* 设合适的最大宽度，也可以用width:100%实现自适应 */
  margin: 0 auto; /* 让画廊居中显示 */
}
.gallery .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列自动平分容器宽度，避免溢出 */
  grid-gap: 20px;
  padding: 10px;
}
.gallery .grid-item {
  display: block; /* 让点击容器占满网格单元格 */
  overflow: hidden; /* 裁剪图片超出部分 */
  border-radius: 8px; /* 可选：给图片加圆角，提升视觉质感 */
}
.gallery .grid-item img {
  width: 100%;
  height: 280px; /* 统一图片高度，可根据需求调整 */
  object-fit: cover; /* 保持图片比例填充容器，不会拉伸变形 */
  transition: transform 0.3s ease; /* 可选：鼠标悬停放大效果 */
}
.gallery .grid-item:hover img {
  transform: scale(1.05); /* 可选：悬停时图片轻微放大，增强交互感 */
}

修改后的HTML

<div class="gallery">
  <div class="grid-container">
    <a href="你的作品详情页链接1" class="grid-item">
      <img src="images/cafe ole final-01 copy.png" alt="Cafe Ole">
    </a>
    <a href="你的作品详情页链接2" class="grid-item">
      <img src="images/Nintendo logo redesign-03.png" alt="Nintendo redesign">
    </a>
    <a href="你的作品详情页链接3" class="grid-item">
      <img src="images/shibuya airport logo branding-02 copy.png" alt="Shibuya Airport">
    </a>
    <a href="你的作品详情页链接4" class="grid-item">
      <img src="images/rocket wireless.png" alt="rocket wireless">
    </a>
    <a href="你的作品详情页链接5" class="grid-item">
      <img src="images/transfriend logo 2-02.png" alt="transfriend">
    </a>
    <a href="你的作品详情页链接6" class="grid-item">
      <img src="images/Spotify UI Design.png" alt="Spotify UI Design">
    </a>
    <a href="你的作品详情页链接7" class="grid-item">
      <img src="images/bapeshoead2-01 copy.png" alt="Bape Shoe Design">
    </a>
  </div>
</div>

核心调整说明 #

• grid-template-columns: repeat(3, 1fr)：让三列网格自动平分容器宽度，彻底解决溢出问题
• object-fit: cover：保证图片按比例填充容器，不会拉伸变形，超出部分自动裁剪
• 用<a>标签替代<span>：实现可点击功能，语义化更合理，直接替换成你的作品详情页链接即可
• 可选的悬停效果：提升交互体验，让画廊更有设计感

内容的提问来源于stack exchange，提问作者Raiven Warren