Question

我有一个使用Bootstrap运行的网站。我试图让图片与其容器的高度（it's huge right now）相匹配。我看过make an image fit its container by setting the image height to the containers height，但它没有用。我最好猜测为什么是因为它在链接中：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--<a class="navbar-brand" href="/">K7DXS</a>-->

这是图像：

      <a class-"navbar-brand" class="k7dxslogo" href="/"><img src="/k7dxsblink.gif" class="k7dxslogo" alt="K7DXS" /></a>

其余代码：

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="/linux.php">Linux</a></li>
                <li><a href="/radio.php">Ham Radio</a></li>
                <li><a href="/contact.php">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/partners.php">Partner Sites</a></li>
        <li><a href="/links.php">External Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

我的相关style.css：

.k7dxslogo {
    height: 100%;
}

为什么它不起作用，我该如何解决？

编辑：要明确，我不想为任何事情设定一定的高度。这样做会使网站没有响应。

Answer 1

将“img-responsive”类添加到HTML img标记中。

为navbar-brand

设置定义的高度

使图像链接容器高度

1 个答案: