如何让CSS Grid布局中图片匹配同行兄弟元素高度

核心思路是让Grid行高由文本元素主导，图片容器自动填充行高，同时确保图片不会撑开行：

修改后的代码 #

CSS #

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1.5rem; /* 用Grid间距替代文本的margin-right，布局更规范 */
}

.text {
  background: pink;
  grid-column: span 8;
}

.image {
  grid-column: span 2;
  /* Grid项目默认align-self: stretch，会自动匹配行高 */
}

.image figure {
  height: 100%;
  margin: 0; /* 移除figure默认的外边距，避免额外高度 */
}

.image img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* 保持图片比例，完整填充容器 */
}

HTML #

<div class="container">
  <div class="text">
    <h2>This Section</h2>
    <p>Should set the height of the row</p>
  </div>
  <div class="image">
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="Service Image">
    </figure>
  </div>
</div>

关键调整点 #

• 移除.container的height: fit-content：Grid默认会根据行内元素自动调整行高，无需额外设置，我们要让文本成为行高的主导。
• 用gap替代文本的margin-right：Grid的gap是列之间的标准间距，避免margin可能引发的布局偏移。
• 去掉.image的height:100%：Grid项目默认会拉伸填充行高，手动设置反而可能导致元素基于自身内容撑开行。
• 清除figure的默认margin：浏览器默认给figure加了上下外边距，会额外增加容器高度，必须移除。
• 给图片设置width:100% + object-fit:cover：确保图片填充容器的同时，保持比例不变，不会变形。

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