如何让图片适配CSS Grid？解决图片未填满网格空间问题

问题场景 #

我在用CSS Grid布局放置图片时碰到了个小问题：顶部的大图片和右侧的小图片都没法填满分配给它们的网格行区域，能明显看到图片上方和右侧留有空白，这个情况在示意图里表现得很清楚。

先贴一下我的相关代码：

HTML代码

<section class="wrapper">
  <div class="one">
    <img class="img" src="images/lorem/ipsum.jpg" alt="">
  </div>
  <div class="two">
    <img class="img" src="images/lorem/ipsum2.jpg" alt="">
  </div>
  <div class="three">
    <img class="img" src="images/lorem/ipsum3.jpg" alt="">
  </div>
</section>

CSS代码

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 20px;
  height: 100vh;
}
.one {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
}
.two {
  grid-column: 2 / 5;
  grid-row: 3 / 4;
}
.three {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
}
.img {
  width: 100%;
}

问题到底出在哪？ #

核心原因是图片的内在宽高比和网格单元格的尺寸不匹配。你只给图片设置了width: 100%，这会让图片宽度刚好填满容器，但高度会按照原图的比例自动缩放。当网格单元格的高度比图片按比例缩放后的高度大时，就会出现顶部/底部的空白；如果宽度方向比例不对，就会有左右空白。

另外，网格容器的grid-auto-rows: minmax(150px, auto)会让行高根据内容自适应，但图片的自适应高度没有跟上网格行的高度，自然就留空了。

几个实用的修复方案 #

我给你整理了几种常用的解决方法，你可以根据自己的需求选：

方法1：用object-fit属性（最推荐）

给.img类加上height: 100%和object-fit: cover，这样图片会填满整个容器，同时保持原有比例，超出的部分会被裁剪掉，完美适配网格区域：

.img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并填满容器，超出部分裁剪 */
  /* 要是不想裁剪图片，可以换成object-fit: contain，但容器可能会留空白 */
}

给你解释一下这几个object-fit值的区别：

• cover：优先填满容器，保持图片比例，超出的部分裁剪掉，适合大部分需要填满容器的场景
• fill：强制拉伸图片填满容器，会破坏图片比例，一般不推荐
• contain：完整显示图片，保持比例，容器空余部分留空白，适合必须展示完整图片的情况

方法2：把图片改成容器的背景图

如果你的图片不需要语义化（比如只是装饰图），可以把<img>标签去掉，换成容器的背景图，然后用背景属性控制显示：

.one {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
  background-image: url('images/lorem/ipsum.jpg');
  background-size: cover;
  background-position: center; /* 让图片居中显示 */
}
.two {
  grid-column: 2 / 5;
  grid-row: 3 / 4;
  background-image: url('images/lorem/ipsum2.jpg');
  background-size: cover;
  background-position: center;
}
.three {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
  background-image: url('images/lorem/ipsum3.jpg');
  background-size: cover;
  background-position: center;
}

这种方法操作简单，能轻松控制图片的显示位置和大小。

方法3：调整网格行高匹配图片比例

如果你的图片都是固定宽高比（比如16:9），可以计算对应的网格行高，让单元格尺寸和图片比例一致。不过这种方法灵活性很差，一旦图片比例变了就失效，适合固定场景。

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