1 jQuery.fn.autoResize = function() {

     2     // remove enforced with / height (by CSS and/or HTML attributes)

     3     this.css("width", "auto").css("height", "auto");

     4     this.removeAttr("width").removeAttr("height"); // Remove

     5     // compute image size / max allowed size to fit screen

     6     var imgHSize = this.width();

     7     var maxHSize = $(window).width() - ($(document).width() - imgHSize);

     8     var imgVSize = this.height();

     9     // we don't mind if content in [content]footer moved out of the screen

    10     var maxVSize = $(window).height() - ($(document).height() - imgVSize) + $('#footer').height() + $('#contentfooter').height();

    11     if (maxHSize > 0 && maxVSize > 0) {

    12         // if image don't fit screen, set width or height so that

    13         // browser keep img ratio, ensuring the other dimension will

    14         // also fit the screen

    15         if (imgHSize > maxHSize && ((imgVSize / imgHSize) * maxHSize) <= maxVSize) {

    16             this.css("width", maxHSize);

    17         } else if (imgVSize > maxVSize && ((imgHSize / imgVSize) * maxVSize) <= maxHSize) {

    18             this.css("height", maxVSize);

    19         }

    20         else {

    21             // image already fit in screen, don't scale it up

    22         }

    23     } else {

    24         // can't fit image in, don't do anything

    25     }

    26 };

    27 

    28 

    29 $(document).ready(function() {

    30         $("img.contentimage").load(function() {$(this).autoResize()});

    31 });