如何让图片遵守CSS Grid网格行尺寸约束

搭建页面布局时需要图片所在区块占据容器高度的特定比例，使用带fr单位的grid-template-rows定义网格行时，图片始终保持原始尺寸，不遵守父网格的行尺寸规则。先后尝试给图片添加object-fit: contain属性支持按需缩放、将图片包裹在div容器中两种方案，均未生效。
预期效果为两个网格行保持3:2的高度比例，实际表现为图片会占据自身固有尺寸所需的全部空间，完全打破预设比例。

复现代码 #

CSS 部分 #

.container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: 3fr 2fr;
  height: 100vh;
}

img {
  object-fit: contain;
}

.hello {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

HTML 部分 #

<div class="container">
  <div>
    <img
      src="http://via.placeholder.com/600x300"
    />
  </div>
  <div class="hello">
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
  </div>
</div>

CSS Grid 网格项默认存在隐式最小尺寸规则：min-width: auto、min-height: auto，该规则要求网格项的尺寸不能小于内部内容的固有尺寸。
上述代码中使用3fr 2fr定义行高时，第一行的网格项是包裹图片的div，它的最小高度等于图片的固有高度。当fr单位分配的行高小于图片固有高度时，网格项会被内容撑大，直接打破3:2的行高比例。这也是之前添加object-fit、包裹div都不生效的核心原因：网格项本身的尺寸没有被约束，图片不存在明确的缩放边界，object-fit属性自然无法生效。

核心是覆盖网格项默认的min-height: auto规则，强制网格按fr比例分配高度，再给图片设置明确的宽高约束即可。

• 方案1：直接在定义行高时用minmax()将行的最小尺寸设为0

  .container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* 覆盖默认的最小尺寸自适应规则 */
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
    height: 100vh;
  }
  

• 方案2：给所有网格直接子项设置min-height: 0

  .container > * {
    min-height: 0;
  }
  

完成网格尺寸约束后，给图片设置宽高为100%，配合已有的object-fit: contain就能实现图片在分配的区域内按比例缩放：

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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