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

<div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

This... probably will get you where you want.

and the example: fiddle and source

Edit

fixed it: fiddle and source

Answer 2

Best solution with an img tag of unknown dimensions is to :

.bg-fluid {
    position:absolute;
    left:-1000%;right:-1000%; // horizontal center
    top:-1000%; bottom:-1000%; // vertical center
    margin: auto;
}

you can also make it responsive with:

.bg-fluid-responsive {
    min-width: 100%;
    min-height: 100%;
}

and the img tag:

<img class="bg-fluid bg-fluid-responsive" src"..."/>

no need for containers.

note: aspect ratio will be preserved.

Answer 3

Honestly, the best way to do it is with a background image. Since you're going to be using javascript to change the image, you can go ahead and add a little more to change the height as well. To do so, load the image into an invisible div (style="position:absolute; top:-3000px; left:-3000px;") in addition to setting it as a background-image. You can then use javascript to get its height from the img tag inside the invisible div.

Answer 4

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

<div class="container">
    <div class="align"><img src="http://thecustomizewindows.com/wp-content/uploads/2011/11/bulb-wallpaper.jpg" /></div>
</div>

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/