如何让CSS Grid实现类似background-size:contain的自适应效果？

问题核心 #

现有代码使用grid-template-columns: repeat(3, 1fr)会让网格占满容器宽度，当浏览器窗口横向拉伸时，网格会超出可视范围被裁剪。需要让3x3网格整体像background-size:contain那样，根据视口最小边自适应缩放，始终保持正方形且所有单元格完整可见，同时图片不被拉伸、挤压或裁剪。

解决方案 #

完整代码 #

CSS

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
}

.grid {
  display: grid;
  width: min(100%, 100vh - 2rem);
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
  aspect-ratio: 1 / 1;
}

.square {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  padding: 5%;
  background-color: #1E1E1E;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

HTML

<div class="grid">
  <div class="square"><img src="assets/images/sorcerer.jpg" alt="Sorcerer"></div>
  <div class="square"><img src="assets/images/architect.jpg" alt="Architect"></div>
  <div class="square"><img src="assets/images/warrior.jpg" alt="Warrior"></div>
  <div class="square"><img src="assets/images/healer.jpg" alt="Healer"></div>
  <div class="square"><img src="assets/images/merchant.jpg" alt="Merchant"></div>
  <div class="square"><img src="assets/images/necromancer.jpg" alt="Necromancer"></div>
  <div class="square"><img src="assets/images/alchemist.jpg" alt="Alchemist"></div>
  <div class="square"><img src="assets/images/artisan.jpg" alt="Artisan"></div>
  <div class="square"><img src="assets/images/trickster.jpg" alt="Trickster"></div>
</div>

关键实现说明 #

• 网格整体适配：通过width: min(100%, 100vh - 2rem)让网格取视口宽度和（视口高度减去内边距）中的较小值，确保网格不会超出视口范围，实现类似contain的自适应效果。
• 保持正方形比例：给.grid添加aspect-ratio: 1 / 1，让整个3x3网格始终保持正方形，避免窗口拉伸时变形。
• 居中布局：body使用flex布局将网格垂直水平居中，内边距防止网格紧贴视口边缘。
• 图片保护：单元格的aspect-ratio确保单元格为正方形，图片的object-fit: contain保证图片按原比例缩放，完整显示在单元格内，无拉伸、挤压或裁剪。

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