Html 控制嵌套网格布局中图像的大小

我试图进入网格布局系统，我真的很难在网格容器中处理图像大小。我只想创建一个带有导航栏的简单页面。导航栏应包含徽标、图标和文本。它分为三个部分：

---

• 包含徽标的左侧部分（与左侧对齐）
• 中心零件，包含标题（与中心对齐）
• 右侧部分，包含图像和文本（与右侧对齐）

---

因为我希望尽可能使用网格，所以我的计划结构如下所示：

HTML：

<div class="site">
  <div class="navbar">
    <div class="navbar__area--left">
      <div>Logo</div>
    </div>
    <div class="navbar__area--center">
      <div>Admin Page</div>
    </div>
    <div class="navbar__area--right">
      <div>Text</div>
      <div>Image</div>
    </div>  
  </div>
  <div class="content">Content</div>
</div>

我为每个部分创建了三个容器，这样我可以分别对齐它们的内容。到目前为止还不错

现在，我在左边添加了一个测试图像，希望它适合容器的高度。但事实并非如此。

我不明白的是，如果我从左侧移除封闭容器，图像将与导航栏的高度完美匹配，正如之前所预期的那样

但是我需要这个容器，因为对于右边的部分，我希望容器中有多个项目，所有项目都对齐到右边

---

我知道，我可以为图像等设置固定高度，但我想深入研究网格系统，我相信有办法解决我的问题。

而不是将图像设置为

高度：100%；宽度：auto

（因为您缺少一个

；

和，所以它无论如何都不起作用），请尝试

宽度：100%

。同时请记住和，这两者都可能在此处产生影响。@Michael_B@Michael_B谢谢你给我指明了正确的方向！而且都包含了我的案子的重要信息。我曾考虑将所有封闭标记设置为

height:100%

，但这并不能解决我的问题，因为

网格模板行的隐式高度：1fr 9fr

不是我想要的。设置

min-height:0

与

height:100%

@Michael\B相结合很有帮助，但我不知道在哪些元素上需要

min-height:0

。在我看来，它只能是

.navbar

，因为它是

.site

网格容器中的网格单元，隐式高度为

1fr

。但是我需要把

minheight:0

放在

.navbar

和

.navbar\uuuu区域--左边

。。。为什么呢？下面是一个工作示例：因为这两个元素都是网格容器的子元素，所以它们都是网格项，因此默认情况下都设置为

minheight:auto

（基于内容）。

html, body{
  margin: 0;
  padding: 0;
}
.site{
  display: grid;
  grid-template-rows: 1fr 9fr;
  height: 100vh;
}
.navbar{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background-color: green;
}
.navbar > div > *{
  display: inline;
  margin-right: 2rem;
  margin-left: 2rem;
}

.navbar__area--left{
  text-align: left; 
}
.navbar__area--center{
  text-align: center;
}
.navbar__area--right{
  text-align: right;
}