1

My last question in terms of CSS was this one:

Website background responsive

it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.

<style type="text/css">
.logo {
    display: block; 
    text-align: center;
    margin-top:40px;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
</style>

<img src="https://www.google.com.tw/images/srpr/logo11w.png"  class="logo"/>

just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.

I realy appreciate some ideas!

2
  • your logo container should have text-align:center and your container logo should have a max-width , in different devices.So your logo will not look stretched Oct 10, 2014 at 3:56
  • On screenfly it doesnt look stretched on any device. Since max-width:100% just allow the logo to be as width as it was designed it should work. Also a "text-align: center;" is here. Not sure if i did understand something wrong. Oct 10, 2014 at 4:05

1 Answer 1

0

A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).

Making the image display: table allows the flexible width image to be centered with margin: 0 auto

In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.

CSS / HTML / Demo

.logo {
  display: table;
  margin: 40px auto 0;
  max-width: 40%;
  max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.