Positioning image horizontally center and make height 100% of viewport

Question

I have a an image taking up the entire height of the viewport. The image height should span the entire viewport height (100%) so that it will fit to the screen it is viewed

Answer 1

Put the img in a div and set text-align: center. Make the div fixed, not the img. To stretch smaller images, use height: 100% instead of max-height.

div.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
div.bg img {
    height: 100%;
}​

Working demo: http://jsfiddle.net/Mt7ce/