网站添加logo后占满整个页面无法调整尺寸 附现有HTML代码

解决方法 #

1. 补全logo插入代码 #

你当前.brand类目下的跳转链接是空的，先把logo图片插入到链接标签内，示例代码如下：

<div class="brand">
  <a href="#home">
    <img src="替换为你的logo本地路径或在线地址" alt="网站logo">
  </a>
</div>

2. 添加CSS限制logo尺寸 #

logo占满全屏是因为没有给图片设置尺寸约束，浏览器默认会按照图片原始大小渲染，添加以下CSS规则即可：

/* 限制logo图片大小 */
.brand img {
  height: 48px; /* 可以根据你的导航栏高度自行调整数值 */
  width: auto; /* 宽度自动等比缩放，避免logo变形 */
  display: block;
}

/* 可选：适配导航栏对齐样式 */
.brand {
  display: flex;
  align-items: center;
  height: 100%;
}

如果调整后尺寸还是异常，检查全局样式中是否给img标签设置了width: 100%这类规则，给上面的.brand img规则加!important或者提高选择器优先级覆盖即可。

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