如何为特定CSS Grid项使用object-fit: cover实现图片裁剪？

你的问题核心是：最后两张图片的object-fit: cover未生效，原因是图片默认以自身高度撑开网格单元格，没有被限制在单元格高度内，因此没有裁剪空间。

修复方案 #

给需要裁剪的图片添加height: 100%，强制其高度匹配网格单元格的高度，配合object-fit: cover实现裁剪效果。

修改后的完整CSS代码：

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(4, auto);
  grid-gap: 20px;
  width: 50%;
}
img {
  width: 100%;
}
.grid img:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.grid img:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.grid img:nth-child(3) {
  grid-column: 1 / 2;
  grid-row: 3 / 5;
}
.grid img:nth-child(4),
.grid img:nth-child(5) {
  grid-column: 2 / 3;
  height: 100%; /* 强制图片高度匹配单元格 */
  object-fit: cover;
}
.grid img:nth-child(4) {
  grid-row: 3 / 4;
}
.grid img:nth-child(5) {
  grid-row: 4 / 5;
}

原理说明 #

1. height: 100%：让图片高度完全继承所在网格单元格的高度，不再以自身原始尺寸撑开单元格。
2. object-fit: cover：图片会按原始比例缩放，填满整个单元格区域，超出单元格的部分会被自动裁剪，保证图片比例不变。
3. 左侧第三张图片占据第3、4两行，会自动将这两行的总高度拉伸至与第1、2行一致，因此右侧两个单元格的高度自然是左侧大单元格的一半，符合你的预期效果。

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