Question

Twitter的documentation声明“通过添加.img-responsive课程，可以使Bootstrap 3中的图片具有响应性。这适用于max-width: 100%;，height: auto;和{{ 1}}到图像，以便它很好地缩放到父元素。“

这是我的HTML：

display: block;

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

<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>

我是Bootstrap的新手但我的理解是扩展其核心代码而不是覆盖它更好。对我来说，添加类.img-responsive { max-height: 100%; }应该按照它所说的做 - 将图像很好地缩放到父元素。

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

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

Answer 1

.navbar-brand默认情况下没有设置宽度，因此.img-responsive不知道父宽度应该是什么，因此无法缩放到它。

默认情况下，如果<img>标记中没有添加任何宽度或高度属性，则图像将以完整大小显示。

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

http://www.bootply.com/BGsm04iKKK

Answer 2

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

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

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

Source

尽管“img-responsive”

2 个答案: