如何用CSS Grid为导航栏添加Logo？解决屏幕放大时Logo超出问题

嘿，我来帮你搞定这个导航栏Logo的问题！看起来你遇到的核心问题是屏幕尺寸增大时，导航栏的行高被拉伸，导致Logo超出了导航栏范围。咱们一步步来解决：

问题根源分析 #

你的.container用了grid-template-rows: repeat(12, 1fr)，这意味着当视口高度增加时，每个网格行的高度会跟着均分变大。而.navbar作为第一个网格项，默认会被拉伸填充整个网格行的高度，但你又给.navbar内部的Grid设置了固定的100px行高，再加上Logo图片没有高度约束，就导致了Logo超出导航栏的情况。

解决方案 #

这里有两种实用的解决思路，你可以根据需求选择：

方案一：固定导航栏高度，防止被网格拉伸 #

这种方式适合你想保持导航栏固定高度的场景：

<div class="container">
 <div class="navbar">
 <div class="logo-desktop">
 <img src="E:\work\JensonWebsite\images\jenson-logo-desktop.svg" />
 </div>
 </div>
 <!-- 其他页面元素 -->
</div>

.container {
 height: 100%;
 display: grid;
 grid-template-columns: 1fr;
 /* 第一行自适应导航栏高度，其余行均分剩余空间 */
 grid-template-rows: auto repeat(11, 1fr);
}

.navbar {
 display: grid;
 padding: 6px;
 background-color: #0E1848;
 grid-template-columns: repeat(12, 1fr);
 grid-template-rows: 100px; /* 保持固定高度 */
 align-items: center;
 justify-content: center;
 align-self: start; /* 关键：防止被container的网格行拉伸 */
}

.logo-desktop img {
 max-height: 100%; /* 图片最大高度不超过父容器高度 */
 width: auto; /* 维持图片宽高比，避免变形 */
}

方案二：让导航栏高度自适应内容，同时限制范围 #

如果想让导航栏根据Logo高度自适应，但又不想它过高或过低，可以这样调整：

.container {
 height: 100%;
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto repeat(11, 1fr);
}

.navbar {
 display: grid;
 padding: 6px;
 background-color: #0E1848;
 grid-template-columns: repeat(12, 1fr);
 align-items: center;
 justify-content: center;
 max-height: 120px; /* 限制导航栏最大高度 */
 min-height: 80px; /* 保证导航栏最小高度 */
}

.logo-desktop img {
 /* 减去上下padding的总和（6px*2），避免图片碰到导航栏边缘 */
 max-height: calc(100% - 12px);
 width: auto;
}

关键要点总结 #

• 调整.container的网格行设置，让导航栏所在的行自适应高度，而不是强制均分。
• 用align-self: start固定导航栏的高度，避免被父网格拉伸。
• 给Logo图片添加max-height约束，确保它不会超出导航栏的内部空间，同时保持宽高比。

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