html - Bootstrap，如何使 Logo 适应导航栏大小？

Question

我正在使用以下代码制作我网站的导航栏:

  <nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="images/logo.png" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>

问题是 Logo 图像很大(225x225 像素)，我想将其设置为导航栏的默认大小。但恰恰相反，即导航栏适应 Logo 的大小(并变得非常大)。

我没有在 bootstrap 中找到任何功能来执行此操作？有什么想法吗？

谢谢

Answer 1

navbar-fixed-top 的高度固定为 50px，因此您可以通过设置例如max-height: 40px 和 margin: 5px 居中图像。

.navbar-header img {
  height: 40px;
  margin: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top"> 

    <div class="navbar-header">

    <img src="http://lorempixel.com/225/225" class="img-circle">
    </div>

    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="#">Liens</a> </li>
        <li> <a href="#">Login</a> </li>
        <li> <a href="#">Signup</a> </li>
      </ul>
    </div>
  </nav>