CSS Grid响应式图片画廊：如何让竖图保持方形布局？

你的问题核心是竖版图片会按自身比例拉伸高度，导致Grid格子无法保持统一方形。只需通过给图片容器设置固定宽高比，再让图片填充容器就能解决，具体修改如下：

修改后的完整代码 #

HTML（无需改动） #

<div id="gallery">
  <a href="001.jpg"><img class="image" src="001.jpg"></a>
  <a href="002.jpg"><img class="image" src="002.jpg"></a>
  <a href="003.jpg"><img class="image" src="003.jpg"></a>
  <a href="004.jpg"><img class="image" src="004.jpg"></a>
</div>

CSS（关键修改） #

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
  gap: 10px; /* 合并行列间距，写法更简洁 */
  margin: 0 30px;
  /* 移除height:100%和top:0，避免不必要的高度限制 */
}

#gallery a {
  display: block;
  position: relative;
  padding-top: 100%; /* 基于宽度的百分比padding，实现1:1方形容器 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填满容器，保持比例，多余部分裁剪 */
  /* 若想完整显示图片（容器内留空白），替换为 object-fit: contain; */
}

关键修改说明 #

• 方形容器实现：给<a>标签添加padding-top:100%，CSS中百分比内边距基于父元素宽度计算，因此容器高度会等于宽度，固定为方形。
• 图片填充容器：将图片设为绝对定位，覆盖整个容器，配合object-fit: cover确保图片按比例填满容器，不会因自身长宽比破坏布局。
• 裁剪溢出：overflow: hidden避免图片超出方形容器范围，保持视觉整洁。

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