私のロゴをナビゲーションバーに合わせるにはどうしたらいいですか？

Question

大きな透明なロゴがあり、ダウンロードしたテーマに付属の古いロゴの代わりに配置しましたが、ナビゲーションバーに応じて縮尺は変わりません

私は、ロゴのサイズを小さくすることができますしかし、私は...それは私のナビゲーションバーの内側に収まるように、それはこの問題ここ

を修正するための最良の方法は、私は

<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a></div> 

がどのように私は、ロゴを修正すればよいのロゴを持っているコードだではないように感じる

ここで 'あなたは、画像のフィッティングで遊んでいる時はいつでも私の全体のナビゲーションバーのHTML一般に

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <!-- Logo --> 
      <a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a> 
     </div> 

     <!-- Navmenu --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#home">Home.</a> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menus.</a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="./breakfast.html">All Day Breakfast</a></li> 
         <li><a href="./lunch.html">Lunch</a></li> 
         <li><a href="./childrenmenu.html">Children's Menu</a></li> 
         <li><a href="./coffeeandcake.html">Coffee and Cakes</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="#about">Location.</a> 
       </li> 

       <li> 
        <a href="#cater">Catering.</a> 
       </li> 
       <li> 
        <a href="#about">About.</a> 
       </li> 

       <li><a href="#contact">Contact.</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

Sは、これらの4つのCSSは、あなたが探している属性です。

.img-responsive { 
    height: auto; 
    width: auto; 
    max-height: 72px; 
    max-width: 250px; 
} 

スニペットでは、画像のサイズを自動的に調整するように指示しています。 <img>タグは明示的に指示されない限りアスペクト比を保持しようとします。 2つのmax-属性は、私たちが望む最大の次元を決定します。たとえば、幅300ピクセル、高さ72ピクセルの画像をアップロードすると、最大高さよりも小さく、幅が250ピクセルになります。画像を垂直方向に中央に

は、あなたがこれを行うことになるでしょう：あなたのイメージは、ナビゲーションバーの正確な高さがある

line-height: 72px; /* whatever the fixed height of the bar is */ 
vertical-align: middle; 

場合は、それがオフに見える場合vertical-align: topを使用してみてください。