Bootstrap 导航栏图像尺寸太大答案

【问题标题】：Bootstrap Navbar Image size is too bigBootstrap 导航栏图像尺寸太大
【发布时间】：2019-02-14 07:14:54
【问题描述】：

我是 bootstrap 4 的新手，我对导航栏有疑问。所以我想把我的公司名称和它的标志放在旁边，但由于某种原因，图像太大了。我能做些什么来改变图像的大小以适应导航栏的大小。谢谢！

<nav class="navbar navbar-expand-sm fixed-top">
    <div class="container">
      <a href="index.html" class="navbar-brand text-dark display-4">
        <img id="ojLogo" src="img/ojicon.png"> OddJob
      </a>
    </div>
</nav>

【问题讨论】：

请参阅 here 了解 HTML 中的图像大小和 here 调整图像大小。

标签： html bootstrap-4 navbar

【解决方案1】：

您必须定义徽标图像的高度以减小其图像大小。还需要将图像向左浮动，以便在其旁边显示公司名称。如有必要，还可以定义导航栏品牌的宽度。您可以使用以下 CSS：

.navbar-brand {
  width:150px;
  font-size: 24px;
}
.navbar-brand img {
  height: 50px;
  /* put value of image height as your need */
  float: left;
  margin-right: 7px;
}

【讨论】：