Question

OK, here was my original question, where I’ve left out the most important thing: to horizontally center the image, if the screen is bigger than max-width.

So far the classic trick for margin: auto doesn’t work, because then width: 100% isn’t the screen anymore.

#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}

#bigimage {
max-width: 1024px;
width: 100%;
}   


<div id="main" role="main">
    <img src="img/bigimage.jpg" id="bigimage">
</div>

So I’m looking for an other solution. Any idea how to make max-width and horizontal centering work together?

Update:

OK, I’m almost there:

#main {
width: 100%;
text-align: center;
}

#bigimage {
max-width: 1024px;
width: 100%;
}

And it works great in all browsers, except IE8. Even IE 7 is OK! IE8 resizes the image without keeping the aspect ratio! I mean it makes it max-width wide but original width high. Can you help me how to make it not distort in IE8?

Also, a live site, with 500px max-width:
http://ilhaamproject.com/

Answer 1

if your image have an static aspect ratio then it can be done with max-height. If you add max-height to your image based on the 1024px width (726px for 4by3 aspect ratio) then it would be fine in every browser. See the fiddle before applying max-height and after that. I just used 400px width instead.

HTML:

    <div id="container">
        <img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
    </div>

CSS:

#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}

BUT if your images are not in same size or aspect ratio you maybe need some JavaScript just like how Facebook forced to do that.