具有徽标的Bootstrap 3导航栏

Add the following to the .navbar-brand class

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}

The easiest and best answer for this question is to set a max width and height depending on your logo, the image will be a max of 50px high but no longer than 200px.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

This will vary depending on your logo size and the nav bar items you have.

This code works perfect if you need to see the brand centered and with auto width in toolbar. It contains the Wordpress function to get the image file from right path:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

You might try using @media query such as below.

Add a logo class first, then use @media to specify your logo height and width per device size. In the example below, I am targeting devices which have a max width of 320px (iPhone) You can play around with this until you find the best fit. Easy way to test: Use chrome or Firefox with inspect element. Shrink your browser as far as possible. Observe the logo size change based on the @media max width you specify. Test on iPhone, android devices, iPad etc to get the desired results.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}

Please try following code:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

Maybe this is too simple, but I just copied the navbar-brand line so there are two of them, the image and then the text.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

And I created an image that fits inside the navbar (roughly 1/2 the height).

I also implement it via css background property. It works healty in any width value.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}

Quick Fix : Create a class for your logo and set the height to 28px. This works well with the navbar on all devices. Notice I said works "WELL" .

.logo {
  display:block;
  height:28px;
}

You must use code as this:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

Class of A tag must be "logo" not navbar-brand.

I use the img-responsive class and then set a max-width on the a element. Like this:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

and the CSS:

.navbar-brand {
    max-width: 50%;
}

Instruction how to create a bootstrap navbar with a logo which is larger than the default height (50px):

Example with a logo 100px x 100px, standard CSS:

1. Compute the height and (padding top + padding bottom) of the logo. Here 120px (100px height + padding top (10px) + padding bottom (10px))

2. Goto bootstrap / customize. Set instead of navbar height 50px > 120px (50 + 70) and navbar-collapse-max-height from 340px to 410px (340 + 70). Download css.

3. In this example I use this navbar. In navbar-brand:

     <div class="navbar-header">
       ...
       </button>
       <a class="navbar-brand myLogo" href="#">
         <img src="yourLogo.jpg" />
       </a>
     </div>...
   

   add a class, for example myLogo, and an img (your logo)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

4. Add CSS

   .myLogo { padding: 10px; }

5. Adequate to other sizes.

Example

My solution is add css "display: inline-block" to img tag.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DEMO: jsfiddle

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <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" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>