Make logo image responsive using Bootstrap

Question

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>

Answer 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.

Answer 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">