I'm trying to set up a dynamic portfolio layout which utilises the viewport as a platform to see a full size image, sort of using a "background" img tag to display an image as large as the viewport will allow (keeping aspect ratio and such).

I've run into a snag where when you expand the window wide enough that the image in keeping with aspect expands beyond the height and vis versa and can't figure out the best way to tackle it.

Here's the coding so far to prevent this issue:

   if (iratio > 1 && $('img.full').height < $(window).height()) {

        $('img.full').width($(window).width());

        $('img.full').height(width / iratio);

    } else if (iratio > 1 && $('img.full').width < $(window).width()) {

        $('img.full').width(height * iratio);

        $('img.full').height($(window).height());

    };

First if : if landscape picture and image height is less than viewport's, match image's width with viewport's, then calculate height from ratio, another var higher up,

 var iratio = iwidth / iheight;

Second if: if portrait and image width is less than viewport's, match image's height with viewport's and calculate width.

What I need it that, but then something that'll say do it up to a point that both image's Height and Width match viewport's, freeze them, and just add on the remaining as margin-left (landscape picture) or margin-top(portrait picture).