Make logo image responsive using Bootstrap

问题

I am using bootstrap for a site header. If I would like to make the website's logo responsive, Should I have two logo images (one for desktop and one for mobile) or should I resize my image logo? what is the best way to get it? Thanks. That's my code:

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid"></div>
    <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 src="~/Content/images/logo.png" /></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="~/About/Index">About</a></li>
            <li><a href="~/Contact/Index">Contacts</a></li>
        </ul>
    </div>

</nav>

回答1:

I don't think that there is one single answer to this question, but I'll try to shed some light on your options.

With Bootstrap, you can add the .img-responsive class to the image in order to make it resize with the page width. According to Bootstrap's documentation:

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

Now I'll take it a step further - having two different images. This isn't so much for Desktop vs. Mobile as it is screen resolution. Retina screens will display images at a higher resolution, for example. Many people provide two different images, one at normal resolution and one double that for retina screens.

This tutorial highlights some methods for preparing your images for Retina screens, including providing one source image that is then downsized or using CSS Media Queries to change the src of the image. I'll also add that using CSS Media Queries to change the src of the image doesn't necessarily mean that the user will have to download two versions of the same image.

回答2:

Bootstrap's responsive image class sets max-width to 100%. This limits its size, but does not force it to stretch to fill parent elements larger than the image itself. You'd have to use the width attribute to force upscaling.

http://getbootstrap.com/css/#images-responsive

thanks to isherwood DEMO

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" alt="Responsive image">

回答3:

add the class

img-responsive

to your image

Adding two images should be better. But a lot of browsers don't recognise that your smaller image is for responsive (hopefully this will change soon). So they'll have to load 2 images. Which is heavier (and slower) to load.

For now it is still better to just add the class to your image.

回答4:

Where you have the image now, using height:100% and width:auto, should keep it to the size of the navbar. The navbar is 50px tall by default for whatever device you've got.

回答5:

Override this classes

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

回答6:

In bootstrap there is a class to make images responsive.

The class is img-responsive

Add this to your img tag and the image will become responsive.

回答7:

I prefer another solution. Create another class called logo-navbar:

<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <img class="logo-navbar" src="img/logo-1-img-black.png">
</a>

And aplied a relational width with the menu font-size:

img.logo-navbar {
    width: 2rem !important;
    height: 2rem !important;
}

This way your logo will always be adjust with your navbar content.

来源：https://stackoverflow.com/questions/30030009/make-logo-image-responsive-using-bootstrap

标签

html

css

twitter-bootstrap

responsive-design

navbar