html - 带有大量 Logo 的 CSS Bootstrap 导航

Question

我用 Bootstrap 的 CSS 创建了一个导航。在我添加图像( Logo 和奖项 Logo )之前，它工作得很好。我添加的 3 张图片是 471x249、251x117 和 275x300，当我查看导航时，图片很大。我注意到这一行:

.nav>li>a>img {
  max-width: none;
}

我试着调整最大宽度，结果看起来更糟。

这是完整的导航:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <div class="container-fluid">
      <nav class="navbar navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
              <i class="fa fa-bars"></i>
            </button>
            <a href="#" class="navbar-brand">
              <img src="http://2014violadepc.en.ecplaza.net/logo.jpg" />
            </a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a>
              </li>
              <li><a href="#">Communities</a>
              </li>
              <li><a href="#">Pronto</a>
              </li>
              <li><a href="#">Gallery</a>
              </li>
              <li><a href="#">Virtual Tours</a>
              </li>
              <li><a href="#">Design Centre</a>
              </li>
              <li><a href="#">Customer Care</a>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <a href="#">
                  <img src="http://itg-instructor-training.co.uk/Images/images/images/banner_01_01.png" />
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://arabbrains.com/wp-content/uploads/2013/03/emc-logo1-275x300.jpg" />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

有什么解决图片问题的建议吗？

Answer 1

您试图在不指定高度的情况下分配最大宽度属性。

只需更改这一行:

<a href="#" class="navbar-brand"><img src="images/logo.jpg" /></a>

对此

<a href="#" class="navbar-brand"><img class="img-responsive" src="images/logo.jpg" alt="" /></a>

并将您之前编辑的那些最大宽度属性更改回它们的原始值，它应该可以正常工作。

现在图像大小将根据导航栏标题的高度来计算(同时保持宽高比)。

----更新----

我检查了您的 fiddle 并注意到您在某个类中写了 collapse 而不是 toggled。我还为您的图像设置了一个最大高度属性，您可以相应地进行更改。

这是一个 jsfiddle:http://jsfiddle.net/AndrewL32/z08oyjva/