How to center an image that is wider than the browser window (not a background image)

Question

How can I centre a large image to the browser window, so that if it is wider than the window it will still be centred?

See: http://carolineelisa.com/rob/

I d

Answer 1

Nearly two years later, I was having a similar issue and wanted to solve it with only html/css (using javascript only to change between images).

Finally I had to resolve to a total of three elements to achieve always centered images (images both smaller and larger than the page/wrapping element).

The html construction

The css:

div.container
{
    position: relative;
    width: 100%;
    overflow: hidden;
}
div.container div.align
{
    position: relative;
    width: 10000px;
    left: 50%;
    margin: 0 0 0 -5000px;
    text-align: center;
}

While I don't really like having to work with insanely stretched elements, it seems super effective.

Here's the fiddle: http://jsfiddle.net/NjJ3G/3/