CSS Grid子元素图片溢出：如何让图片占满空间且保持宽高比

CSS Grid 网格子项默认的min-height属性值为auto，这个默认规则会强制子项高度不小于内部内容的固有最小高度，不会严格遵守grid-auto-rows设定的固定行高，最终卡片被图片内容撑破，出现溢出问题。

不需要修改HTML结构，仅调整3处CSS规则即可实现「图片占满可用空间、保持宽高比、不溢出」的效果：

• 给外层网格的直接子项article添加min-height: 0，覆盖默认的min-height: auto规则，让卡片严格遵守网格设定的150px行高
• 内层作为Grid容器的article本身也添加min-height: 0，让内部1fr的图片行可以正确计算剩余可用高度，不会被图片固有高度撑大
• 调整图片的尺寸规则，去掉强制拉伸的height: 100%，改用max-height: 100%配合object-fit: scale-down，让图片在可用空间内自动按比例缩放至最大尺寸，不变形、不溢出

修改后的完整核心CSS代码如下：

.suggestions {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  display: grid;
  grid-gap: 2.5em;
}

.suggestions > article {
  padding: 1.5em;
  border-radius: 12px;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  background-color: white;
  /* 覆盖外层Grid子项默认最小高度规则 */
  min-height: 0;
}

article {
  display: grid;
  grid-gap: 1em;
  place-content: center;
  place-items: center;
  grid-template-rows: min-content 1fr;
  /* 覆盖内层Grid容器默认最小高度规则 */
  min-height: 0;
}

img {
  display: block;
  max-width: 100%;
  /* 限制图片最大高度为容器可用空间，保持比例 */
  max-height: 100%;
  height: auto;
  object-fit: scale-down;
}

.title {
  font-size: 1.2rem;
}

调整后所有卡片都会严格保持150px的固定行高，图片会自动适配卡片内扣除标题、内边距、间距后的剩余空间，始终保持自身宽高比，不会出现溢出、拉伸变形的问题。

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