Bootstrap 3 'img-responsive' class 不太敏感
Bootstrap 3 'img-responsive' class not so responsive
更新:这是最新的jsFiddle。
您可能需要调整 Result 窗格的大小,甚至将其拆分为自己的 window,才能看到它的全部魅力。
如您所见,我有一个 400x200 的徽标图片,我已 尝试 使其响应(通过 .img-responsive
class),但是它继续保持相同的大小 (400x200) 并且没有调整大小 + 很好地嵌套到我的 header 导航栏中。
理想情况下,图像应调整大小并适合导航栏内的菜单项(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 或其他类型的容器中?我哪里出错了?
添加这个可能对你有帮助
.img-responsive
{
width:100%;
}
更新:这是最新的jsFiddle。
您可能需要调整 Result 窗格的大小,甚至将其拆分为自己的 window,才能看到它的全部魅力。
如您所见,我有一个 400x200 的徽标图片,我已 尝试 使其响应(通过 .img-responsive
class),但是它继续保持相同的大小 (400x200) 并且没有调整大小 + 很好地嵌套到我的 header 导航栏中。
理想情况下,图像应调整大小并适合导航栏内的菜单项(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 或其他类型的容器中?我哪里出错了?
添加这个可能对你有帮助
.img-responsive
{
width:100%;
}