適合圖像引導導航欄高度響應

我想知道如何使圖像適合引導導航欄高度（按比例），這裏是一個描述性的圖像：適合圖像引導導航欄高度響應

任何想法？

我使用這個結構：

<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

適合圖像引導導航欄高度響應

回答

相關問題