Responsive logo that works on all browsers using CSS3 and Bootstrap

Asked

Viewed 8,189 times

0

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

inserir a descrição da imagem aqui

html:

<div class="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;
    }
}
html5 twitter-bootstrap css3

  • Thanks, it was poorly edited. Can you help? maybe a similar hack for IE like the one I used for Firefox?

  • It is unclear what you are asking. Edit the question, reduce the title and give us more details in the body of the post.

  • I hope I’ve been clearer?

  • Your question is not clear yet, detail exactly the problem in question, what happens in IE that works in Firefox, but for now here is a fiddle I did on a centralized and responsive banner with Css (no hacks): http://jsfiddle.net/vFQNa/

  • I hope the image above helps to understand

  • Leonardo Thanks! my logo is already responsive in IE the problem was that in the properties beyond the max-width I also had to set only the width!

Show 1 more comment

2 answers

2

In bootstrap there are some helpers that can serve you very well during the development of the project, and at the moment you can use the class .img-Responsive. This class will treat "automatically" the width of your image and adapting 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 on icone mobile to test different sizes)

Ideal for mobile devices is to decrease data traffic with your page, using Media queries and create different sizes for the logo, sure adaptation will be much better and the performance too.

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 one example of how it could be done.

  • Yes I had already seen, but for some reason firefox did not work. Thank you ;)

  • @Schismatick try to put width:100%;

  • another solution however gambiarra is to put the class .col-xs-12 in your logo.

0

Browser other questions tagged html5 twitter-bootstrap css3

You are not signed in. Login or sign up in order to post.