如何让Grid图片容器高度匹配同级<p>元素的实际高度？

我使用了Grid及子Grid布局，行内包含重复的「<div>包裹<img>」与「<p>」配对结构。我希望每个图片容器（frame类）的高度与其同级<p>元素的高度一致，即：

• 图片容器高度 = 同级p元素高度（p不换行时为1倍行高，换行时为2倍或更高行高）

我尝试过设置div.frame { height: 100% }，但图片并未随之调整大小。
还尝试过设置height: 0且min-height: 100%的技巧，但这会导致列宽与内容不匹配的溢出问题，其他类似方案也会破坏列宽。查阅了多篇帖子，但大多针对文本/文本容器调整，而非图片/图片容器。

我认为图片的尺寸表现可能有所不同？尝试应用那些方案时遇到困难，图片似乎不受控制。

我可以设置固定高度如0或80px，但文本变化时无法自适应。我原本希望通过设置frame的高度解决问题，但不确定方法。

以下是我目前的代码：

HTML #

<div class=grid>
  <div class="row">
    <div class="cell">
      <div class="frame">
        <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
      </div>
      <p class="note">Matthew Patel</p>
    </div>
    <div class="cell">
      <div class="frame">
        <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
      </div>
      <p class="note">Lucas Lee</p>
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <div class="frame">
        <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
      </div>
      <p class="note">Todd Ingram</p>
    </div>
    <div class="cell">
      <div class="frame">
        <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg">
      </div>
      <p class="note">Roxie Richter</p>
    </div>
  </div>
</div>

CSS #

* { 
  margin: 0;
  padding: 0;
}

body {
  background-color: tan;
  color: black;
}

div.grid {
  display: grid;
  grid-template: repeat(2, auto auto) / repeat(4, max-content);
}

.grid > div.row {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  background-color: antiquewhite;
}

.row > div.cell {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
}

.cell > div.frame {
  max-height: 100%;
  height: 100%;
}

.frame > img.icon {
  max-width: 100%;
  max-height: 100%;
}

.cell > p.note {
  width: min-content;
}

我选择这种布局是因为Grid能在不同图片尺寸下保持对齐。

或许我对CSS中的"100%"高度理解有误？恳请提供帮助与反馈。

问题核心在于：height: 100%需要父元素有明确的高度约束，而你的.cell容器没有定义行高或高度规则，导致.frame的100%高度无法找到参照基准。另外，图片的固有尺寸会干扰Grid行高计算，需要让图片完全服从容器的尺寸限制。

修改步骤 #

1. 给.cell明确行结构，让行高由<p>元素主导，同时设置垂直对齐方式：

.row > div.cell {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto; /* 行高由内容（即p元素）决定 */
  align-items: center; /* 图片与文字垂直居中对齐 */
}

2. 强制.frame高度继承行高，同时让图片按比例缩放：

.cell > div.frame {
  height: 100%;
  width: auto; /* 宽度随高度自适应，保持图片比例 */
}

.frame > img.icon {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，完整显示在容器内 */
}

3. 给<p>元素明确行高，确保换行时高度计算准确：

.cell > p.note {
  width: min-content;
  line-height: 1.2; /* 明确行高，方便换行时计算高度 */
}

修改后的完整CSS #

* { 
  margin: 0;
  padding: 0;
}

body {
  background-color: tan;
  color: black;
}

div.grid {
  display: grid;
  grid-template: repeat(2, auto auto) / repeat(4, max-content);
}

.grid > div.row {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  background-color: antiquewhite;
}

.row > div.cell {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  align-items: center;
}

.cell > div.frame {
  height: 100%;
  width: auto;
}

.frame > img.icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cell > p.note {
  width: min-content;
  line-height: 1.2;
}

原理说明 #

• .cell的grid-template-rows: auto让行高完全由<p>元素的高度决定，.frame的height:100%就能准确参照这个行高。
• object-fit: contain保证图片在容器内按比例缩放，不会变形或溢出。
• align-items: center让图片和文字在垂直方向居中对齐，视觉效果更协调。

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