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

时间:2015-11-21 11:56:34

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

更新:这是最新的jsFiddle

您可能需要调整结果窗格的大小,或者甚至将其分解到自己的窗口中,以便全面了解它。

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

理想情况下,图片应根据菜单项(MUCH AMAZESUCH 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或其他类型的容器中?我哪里出错了?

1 个答案:

答案 0 :(得分:2)

添加此内容可能会对您有所帮助

.img-responsive
{
width:100%;
}