Bootstrap导航栏NavBrand图片用百分比宽度出现右侧空白如何解决

CSS中元素设置百分比宽度时，默认参考对象为自身直接父元素的内容宽度：
你的logo图片的直接父元素是<a class="navbar-brand">标签，你没有给这个a标签设置固定宽度，所以a标签的默认宽度和未缩放的原始logo图片宽度完全一致。当你给img设置width: 50%时，图片只会占满a标签宽度的一半，剩余的50%父元素空间就会表现为右侧的空白边距。
而你将宽度改为固定像素值时，a标签作为行内块元素会自动收缩宽度适配子元素img的实际尺寸，所以不会有多余空白。

方案1：使用vw相对单位（最简便） #

vw是相对于浏览器视口宽度的单位，1vw等于视口宽度的1%，参考对象和父元素无关，不需要修改父元素样式即可实现自适应缩放，同时不会产生多余空白：

.headerLogo {
  /* 数值可根据实际需要调整，代表logo宽度占视口总宽度的比例 */
  width: 12vw;
  /* 可选：添加最大宽度限制，避免超大屏下logo尺寸过大 */
  max-width: 200px;
  height: auto;
}

方案2：给父元素设置适配宽度后再用百分比 #

如果一定要使用相对于父元素的百分比，可以先给父级navbar-brand设置width: fit-content，让父元素宽度永远和子元素img的实际宽度保持一致，再给img设置相对于原始尺寸的缩放比例：

.navbar-brand {
  width: fit-content;
}
.headerLogo {
  /* 这里的百分比是相对于logo原始图片的宽度 */
  width: 50%;
  height: auto;
}

方案3：基于导航栏高度适配（更符合导航栏的常见交互逻辑） #

导航栏一般高度固定，也可以直接限制logo的最大高度，宽度自动等比缩放，适配性更强：

.headerLogo {
  /* 数值可根据导航栏实际高度调整 */
  max-height: 40px;
  width: auto;
}

如果使用Bootstrap 5，img-responsive类已经被改为img-fluid，可以替换原有类名实现更原生的响应式图片适配。

内容的提问来源于stack exchange，提问作者Fernando Velasco Borea