Vertical centering variable height image while maintaining max-width/height

Question

I want to center an image of unknown width/height on a page, while making sure that it shrinks if it is bigger than the page (i.e. use max-width/max-heigh

Answer 1

Try something like this...

Demo: http://jsfiddle.net/wdm954/jYnk8/1/

$(function() {

    h = $('.img').height();
    w = $(window).height();

    if (h < w) { 
        $('.img').css('margin-top', (w - h) /2 + "px");
    }
    else {
        $('.img').height(w);
    }

});

(You can test different sizes by changing some CSS I have commented out.)