Bootstrap 3 'img-responsive' 类反应不灵敏答案

【问题标题】：Bootstrap 3 'img-responsive' class not so responsiveBootstrap 3 'img-responsive' 类反应不灵敏
【发布时间】：2015-12-23 19:45:36
【问题描述】：

更新：这是最新的jsFiddle。

您可能需要调整结果窗格的大小，甚至将其拆分到自己的窗口中，才能看到它的全部荣耀。

如您所见，我有一个 400x200 的徽标图像，我尝试做出响应（通过 .img-responsive 类），但它仍然保持相同的大小 (400x200) 并且是没有调整大小+很好地嵌套到我的标题导航栏中。

理想情况下，图像应根据菜单项（MUCH AMAZE、SUCH WOW 等）调整大小并适合导航栏。

我有一种感觉它与这部分有关：

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="/"><img src="http://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>

我不太确定这个“切换导航”<button/> 在做什么（就在我的徽标<img/> 前面）。诚然，我在这里很喜欢货物，刚刚从他们的示例网站上获得了一些通用的 Bootstrap 3 代码。我是否应用了错误的样式规则？我是否需要将<img/> 放入表单或 div 或其他类型的容器中？我哪里出错了？

【问题讨论】：

图片是响应式的。如果您想将图像放入.navbar-brand 中，可以从.navbar-brand(height:auto) 中删除高度。
感谢 @alirezasafian (+1) - 请查看我更新的 jsFiddle。现在图像出现在导航栏中，但没有调整大小以很好地适应其中。想法？

标签： html css twitter-bootstrap responsive-design image-resizing

【解决方案1】：

添加这可能会对您有所帮助

.img-responsive
{
width:100%;
}

【讨论】：

感谢@Anubhav (+1) - 我如何在<img/> 标签中添加该规则？
要么使用内联作为要么通过添加外部引导样式表 .img-responsive{ width:100%;}