尽管有`img-responsive`，图像仍超出了 Twitter Bootstrap 中的父级答案

【问题标题】：Image extends beyond the parent in Twitter Bootstrap in spite of `img-responsive`尽管有`img-responsive`，图像仍超出了 Twitter Bootstrap 中的父级
【发布时间】：2016-07-15 13:51:31
【问题描述】：

Twitter 的 documentation 声明“Bootstrap 3 中的图像可以通过添加 .img-responsive 类来实现响应式友好。这适用于 max-width: 100%;、height: auto; 和 display: block; 以使其缩放对父元素很好。”

这是我的 HTML：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" class="img-responsive">
      </a>
      </div>
      <ul class="nav navbar-nav">
        <li role="navigation" class="active"><a href="#">NavA</a></li>
        <li role="navigation"><a href="#">NavB</a></li>
        <li role="navigation"><a href="#">NavC</a></li>
      </ul>
    </div>
</nav>

然而，我可以让图像不超出其父级的唯一方法是修改 CSS：

.img-responsive {
  max-height: 100%;
}

我是 Bootstrap 的新手，但我的理解是最好扩展它的核心代码而不是覆盖它。对我来说，添加 img-responsive 类应该能做到它所说的——将图像很好地缩放到父元素。

Fiddle 供您参考。 [编辑] 一定要注释掉我的 CSS 覆盖，看看我在说什么。

我错过了什么？还是我的修改被视为标准做法？

【问题讨论】：

看起来它对我来说工作正常......
@Lee 抱歉，我不是很清楚。您需要在小提琴中注释掉我的 CSS 覆盖，才能看到我在说什么。

标签： html twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

.navbar-brand 默认没有设置宽度，所以.img-responsive 不知道父级宽度应该是多少，因此无法缩放到它。

默认情况下，如果<img> 标记中没有添加宽度或高度属性，则图像以全尺寸显示。

您的修改是正确的。或者您可以只对.navbar-brand 应用最大宽度。

http://www.bootply.com/BGsm04iKKK

【讨论】：

【解决方案2】：

我不相信 img-responsive 类在 Bootstrap 中有效，除非它在 Bootstrap Grid 内部使用。

根据有关如何为navbar-brand 使用图像的文档，您可能需要根据您的图像自定义 CSS。

通过将文本替换为<img>，将导航栏品牌替换为您自己的图像。由于 .navbar-brand 有自己的内边距和高度，您可能需要根据您的图片覆盖一些 CSS。

Source

【讨论】：

颤抖：非常感谢。这对我来说真的很清楚。我真的认为您的答案和@Lee 的答案是正确的，但我根据他提供的详细信息选择了他的答案。但再次感谢您。