html - Bootstrap 3 'img-responsive' 类不那么敏感

Question

更新:这是最新的jsFiddle .

---

您可能需要调整Result Pane 的大小，甚至将其拆分到自己的窗口中，以便看到它的所有亮点。

如您所见，我有一个 400x200 的 Logo 图像，我尝试使其响应(通过 .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/>正在做(在我的 Logo 之前出现的 <img/> )。不可否认，我在这里很狂热，刚刚从他们的示例站点上获得了一些通用的 Bootstrap 3 代码。我应用了错误的样式规则吗？我需要放 <img/> 吗？在表单或 div 或其他类型的容器中？我哪里出错了？

Answer 1

添加这个可能对你有帮助

.img-responsive
{
width:100%;
}