How do I center an image if it's wider than its container?

Question

Normally, you center images with display: block; margin: auto, but if the image is larger than the container, it overflows to the right. How do I make it overflow to the both sides equally? The width of the container is fixed and known. The width of the image is unknown.

Answer 1

Your best bet is to set it as background image of the container instead.

#container {
    background: url('url/to/image.gif') no-repeat center top;
}

Answer 2

I don't think there is a pure CSS solution (Except for the next answer :)). However with Javascript it would be just a matter of finding the width of the image, subtracting the container width, dividing by two and you have how far to the left of the container you need.

Answer 3

I can only think of a Javascript solution since what you need to do is relatively position the image a negative amount to the left of its container:

jQuery

$(document).ready(function(){

    var theImg = $('#container img');
    var theContainer = $('#container');
    if(theImg.width() > theContainer.width()){
        theImg.css({
            position: 'relative',
            left: (theContainer.width() - theImg.width()) / 2
        })
    }
})

Answer 4

A pure css solution requiring one extra wrapper (tested in FireFox, IE8, IE7):

Html:

<div class="outer"><div class="inner"><img src="/yourimage.png"/></div></div>

Css:

div.inner img {border: 1px solid blue; position: relative; left:-50%; }
div.outer {width: 300px; margin: 0 auto; border: 1px solid red; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;float: left;}

Borders are for illlustration purposes.