调整引导程序导航栏品牌标识保持比例

时间:2015-05-27 09:44:16

标签: jquery html css twitter-bootstrap

我想知道是否有办法将导航栏品牌徽标图像进行动态调整,以获得导航栏本身的精确高度,并计算保持图像比例的宽度。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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 alt="Brand" src="images/logo.png"></a>
    </div>

我尝试编辑引导程序.css添加:

.navbar .brand > img { max-height: 40px; }

或:

.navbar .brand { 
    max-height: 40px;
    max-width: 30%; 
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0; 
}
没有运气,图像仍保持相同的巨大尺寸。

第一个应该做的伎俩,我希望这些设置应用于navbar-brand类的标签内的img标签内,但是,即使正确刷新了css,这些设置也不会应用于我的形象。

2 个答案:

答案 0 :(得分:2)

在您提供的CSS中,您可能引用了错误的类名。您需要覆盖.navbar-brand类,但在.brand中引用.navbar类名称。因此,样式不会应用于您想要的元素。

另外,您是否尝试在图片上使用class="img-responsive"

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

否则,请查看此Stackoverflow文章,因为它类似:Bootstrap 3 Navbar with Logo

希望这有助于你的事业。

答案 1 :(得分:-2)

我不知道,但这适用于bootstrap css

@media(*此处指明屏幕尺寸){ //在这里指出图像图标类或属性 然后你可以在尺寸的缩小下指定你想要的图像尺寸 }