Responsive logo that works on all browsers using CSS3 and Bootstrap

Navigation
0

I want when I minimize the window the logo of my site follow without distorting, such as when testing a site on a mobile phone or tablet, ie the image is responsive to the content, but this only happens to me in internet explorer, in the chrome and firefox already works fine!

html:

<divclass="banner">

            <img class="seven-logo" src="img/7a_logo_center3.png"  alt="logo_centro">
    </div>

CSS3 

img.seven-logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle; 
    top: 50%;
    left: 50%;
  }
  /*RESPONSIVE_IMAGE PARA FIREFOX*/
@-moz-document url-prefix() {  
    img.seven-logo{
     width: 100%;
     max-width:600px;
     max-height:156px;
    }
}
    
asked by anonymous 29.07.2014 / 18:12

2 answers

2

In the bootstrap there are some helpers that can serve you well during project development, and for now you can use the .img-responsive . This class will automatically "handle" the width of your image and adapt according to the screen.

HTML 

<img src="http://content4.viralnova.com/wp-content/uploads/2014/07/sony-logo.jpg"alt="" class="img-responsive">

You can see the example in this DEMO (click the mobile icon to test different sizes)

The ideal solution for mobile devices is to reduce data traffic to your page using Media queries and create different sizes for the logo, and performance as well.

CSS 

@media (min-width: 768px) {
    .logo {
        width:200px;
        height:80px;
        background:url("images/logo/200.png");
    }
}

@media (min-width: 992px) {
    .logo {
        width:400px;
        height:220px;
        background:url("images/logo/400.png");
    }
}

@media (min-width: 1200px) {
    .logo {
        width:800px;
        height:440px;
        background:url("images/logo/800.png");
    }
}

This is just an example of how it could be done.

    
29.07.2014 / 19:07
0

Take a look at this plugin, it resizes the divs correctly.

link

    
29.07.2014 / 18:56
Activity does not open Hide login page for logged in users