html - 制作图片链接容器高度

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 设置定义的高度