CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designnavbar
D.B
D.B

Reputation: 4289

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>

Upvotes: 18

Views: 104166

Answers (7)

cbcram
cbcram

Reputation: 165

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.

Upvotes: -1

Udara Herath
Udara Herath

Reputation: 885

Override this classes 

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

Upvotes: 1

Tim McClure
Tim McClure

Reputation: 1192

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.

Upvotes: 18

spasticninja
spasticninja

Reputation: 711

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.

Upvotes: 1

sheshadri
sheshadri

Reputation: 1217

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

Upvotes: 4

Saiyam Gambhir
Saiyam Gambhir

Reputation: 536

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.

Upvotes: 0

Danny van Holten
Danny van Holten

Reputation: 932

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.

Upvotes: 1

Related Questions