嵌套Grid布局下图片尺寸适配问题及导航栏布局疑问

我完全懂你的困扰——既要保留外层容器来容纳多元素，又要让图片完美适配导航栏高度，这确实是Grid布局里容易踩的小细节坑。咱们直接来搞定它：

问题根源 #

你的.navbar是Grid容器，三个区域（left/center/right）作为它的子项，默认高度是由自身内容决定的，并没有填满整个导航栏的高度。当你在左侧区域加入图片时，图片会保持原尺寸，自然无法适配；而移除外层容器后，图片直接成为Grid子项，align-items:center只是让它在单元格内垂直居中，并非真正意义上的高度适配。

解决方案 #

只需要调整几处CSS，就能在保留外层容器的前提下，让图片自动适配导航栏高度，同时保证各区域的对齐效果：

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: stretch; /* 把align-items从center改为stretch，让子项填满导航栏高度 */
 background-color: green;
}
/* 让三个导航区域填满.navbar的高度，并用flex控制内部元素对齐 */
.navbar__area--left,
.navbar__area--center,
.navbar__area--right {
 height: 100%;
 display: flex;
 align-items: center; /* 内部元素垂直居中 */
}
.navbar__area--left{
 justify-content: flex-start; /* 左对齐 */
 padding-left: 2rem; /* 用padding替代margin，避免inline元素间距问题 */
}
.navbar__area--center{
 justify-content: center; /* 居中对齐 */
}
.navbar__area--right{
 justify-content: flex-end; /* 右对齐 */
 padding-right: 2rem;
 gap: 2rem; /* 用gap控制右侧元素的间距，比margin更统一 */
}
/* 给图片设置自适应规则，保证高度不超容器且比例不变 */
.navbar__area--left img {
 max-height: 100%;
 width: auto;
}

为什么这样改？ #

1. align-items: stretch：强制.navbar的三个Grid子项自动填满导航栏的高度，不再仅包裹内容。
2. 区域内用Flex布局：既保证区域本身撑满导航栏高度，又能灵活控制内部元素的垂直居中与水平对齐，比text-align更适合处理多元素场景。
3. 图片的max-height:100%：限制图片最高高度为父容器高度，width:auto维持图片宽高比，避免变形。
4. gap+padding替代margin：让元素间距的控制更简洁，避免inline元素的margin叠加问题。

带图片的HTML示例 #

<div class="site">
 <div class="navbar">
  <div class="navbar__area--left">
   <img src="your-logo.png" alt="Site Logo">
  </div>
  <div class="navbar__area--center">
   <div>Admin Page</div>
  </div>
  <div class="navbar__area--right">
   <div>User Name</div>
   <img src="user-avatar.png" alt="User Avatar">
  </div>
 </div>
 <div class="content">Main Content Area</div>
</div>

这样修改后，左侧的Logo会自动适配导航栏高度，右侧的多元素也能保持右对齐且垂直居中，全程用Grid+Flex的组合解决问题，完全不需要设置固定高度。

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