适合图像引导导航栏高度响应

我想知道如何使图像适合引导导航栏高度（按比例），这里是一个描述性的图像：适合图像引导导航栏高度响应

任何想法？

我使用这个结构：

<nav class="navbar navbar-default"> 
    <divclass="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     <img alt="Brand" src="..."> 
     </a> 
    </div> 
    </div> 
</nav>

来源

2015-11-26 Jonathan Solorzano

如果您只是试图调整图像的大小以对应默认的navbar（min-height: 50px）的高度，则根据您希望图像适合的方式，使用下面的CSS作为基准。

在这个例子中，图像将完全覆盖它的一部分navbar。

查看工作片段。

body { 
 
    padding-top: 70px; 
 
} 
 
.navbar.navbar-inverse { 
 
    border: none; 
 
} 
 
.navbar .navbar-brand { 
 
    padding-top: 0px; 
 
} 
 
.navbar .navbar-brand img { 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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/350x150/f00/fff"> 
 
     </a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> 
 

 
     </li> 
 
     <li><a href="#">Link </a> 
 

 
     </li> 
 
     <li><a href="#">Link </a> 
 

 
     </li> 
 
     <li><a href="#">Link </a> 
 

 
     </li> 
 
     <li><a href="#">Link </a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container text-center"> 
 
    <img src="http://placehold.it/350x150/f00/fff" /> 
 
    <h4>The Same Image At Full Scale</h4> 
 

 
</div>

来源

2015-11-26 05:26:18 vanburen

在我的以前的项目我也遇到这个的一些问题。这里是我解决了这个问题：

HTML：

<nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" 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="index.html" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav" > 
       <li> 
        <a>Menu Item1</a> 
       </li> 
      </ul> 
     </div>   <!-- /.navbar-collapse --> 
    </div>  <!-- /.container --> 
</nav>

并为它的CSS：

.navbar-fixed-top {height: 40px;} 
.navbar-brand img {height: 40px;}

所以设置导航栏和标识图像到相同的高度（而不是给它的宽度，因此它会自动调整）解决了我的问题，良好的定位。两种可能的情况：

你想有一个固定的导航栏：

.navbar品牌IMG {位置：固定;右：0;顶部：0}
你想在上面的标题：

.navbar品牌IMG {位置：绝对的;右：0;顶部：0}

在这两种情况下，我将其设置吨o网站的右上角，但您可以轻松调整。所以关键是：相同高度的导航栏和图像，图像定位良好。（然后保证金填充或图像的精确位置可以很容易地在CSS设置）

希望它能帮助，安德鲁

编辑：对于固定的导航栏，请检查引导文件（已内置在像类navbar-fixed-top等）。

来源

2015-11-26 03:17:29

适合图像引导导航栏高度响应

回答

相关问题