有限高度场景下如何实现CSS Grid或Flexbox的严格等高行？

我需要在高度受限的容器中（比如100vh或由flex-grow分配的剩余空间）实现严格等高的两行布局：

• 上行是设置了object-fit: scale-down的<img>元素，要求占满容器高度的50%，且最大宽度为100%
• 下行是普通文本内容

目前用CSS Grid设置grid-template-rows: 1fr 1fr的方式，当图片尺寸较大时，会挤占下行空间，无法保持两行严格等高。

原代码示例 #

CSS #

body {
  height: 100vh;
  width: 500px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  
  display: grid;
  grid-template-rows: 1fr 1fr;
  
  background-color: cornflowerblue;
  
  padding: 1rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.content {
  background-color: black;
  color: white;
}

HTML #

<div class="grid">
  <img src="https://placehold.co/600x400" />
  <div class="content">Another content</div>
</div>

问题出在object-fit: scale-down的特性：它会优先保持图片的原始比例，当图片原始尺寸的高度大于网格行分配的高度时，scale-down会让图片按宽度适配容器，但此时图片的实际高度可能超过行高，进而撑开网格行。

要解决这个问题，需要给图片外层加一个容器，通过容器限制高度，再让图片在容器内使用object-fit：

修改后的CSS Grid实现代码 #

CSS #

body {
  height: 100vh;
  width: 500px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  background-color: cornflowerblue;
  padding: 1rem;
  /* 确保网格行不会被内容强制撑开 */
  grid-auto-rows: 0;
}

.img-container {
  /* 严格限制容器高度，超出部分隐藏 */
  height: 100%;
  overflow: hidden;
  /* 让图片在容器内居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}

.content {
  background-color: black;
  color: white;
}

HTML #

<div class="grid">
  <div class="img-container">
    <img src="https://placehold.co/600x400" />
  </div>
  <div class="content">Another content</div>
</div>

可选：Flexbox实现方案 #

如果偏好Flexbox布局，也可以达到同样效果：

body {
  height: 100vh;
  width: 500px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: cornflowerblue;
  padding: 1rem;
}

.img-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}

.content {
  flex: 1;
  background-color: black;
  color: white;
}

核心要点 #

1. 给图片添加外层容器，用height: 100%和overflow: hidden严格锁死容器高度，避免图片撑开父级布局
2. 容器内用Flexbox实现图片居中，保证scale-down后的显示效果
3. 网格布局中添加grid-auto-rows: 0（可选），进一步防止行高被内容强制撑开

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