Jquery fullscreen image with borders

I have some code which gives me a fullscreen image which is kept in its original proportions (ie. landscape is fully stretched width ways and portrait height ways). I need to be able to have varied borders around the page (ie top:100,left&right:120,bottom:200) that the image will stop at and not encroach into. Is there an easy fix with what I have?

Any help is appreciated!

 function FullScreenBackground(theItem,imageWidth,imageHeight){
    var winWidth=$(window).width();
    var winHeight=$(window).height();

   开发者_开发问答 var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;

    if ((winHeight / winWidth) > picHeight) {
        $(theItem).attr("width",winWidth);
        $(theItem).attr("height",picHeight*winWidth);
    } else {
        $(theItem).attr("height",winHeight);
        $(theItem).attr("width",picWidth*winHeight);
    };

    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
}

Dear lord....someone help me please!!

The answer from Swatkins did give me the borders, but the image is not scaled in constraint proportions.

I am using this great plugin from Malihu: http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery

but just trying to put varied borders around the image as I said above.

Any help would be great

---

Check the fiddle here : http://jsfiddle.net/leifparker/CSS5e/2/

This image will resize on click. The border margins are set according to a data-attribute (fullmargins) attached to the img. It follows regular margin shorthand (top, right, bottom, left) in pixels.

It is presently animating, but you can turn the delay on the animate to 0 for an instantaneous resize.

HTML

<img src="http://www.airhorns.co.uk/imgs/85/klaxon_chrome.jpg" data-fullmargins="10 20 10 20" class="background_sizer_image" >

Jquery

function FullScreenBackground(theItem){
    var imageWidth = theItem.width();
    var imageHeight = theItem.height();

    var theItemMargins = theItem.data('fullmargins').split(' ');
    var heightMarginDifference = parseInt(theItemMargins[0]) + parseInt(theItemMargins[2]);
    var widthMarginDifference = parseInt(theItemMargins[1]) + parseInt(theItemMargins[3]);

    var widthProportion =  imageWidth / ($(window).width() - widthMarginDifference);
    var heightProportion =  imageHeight / ($(window).height() -heightMarginDifference);

     if (widthProportion > heightProportion){
         theItem.animate({ width  : (imageWidth / widthProportion) ,
                           height : (imageHeight / widthProportion) }, 150)
     } else {

         theItem.animate({ width : (imageWidth / heightProportion) ,
                           height : (imageHeight / heightProportion)  }, 150)
     }
}

$('.background_sizer_image').click(function(){ FullScreenBackground($(this))});

---

Not tested, but you might try:

function FullScreenBackground(theItem,imageWidth,imageHeight){
    var winWidth=$(window).width();
    var winHeight=$(window).height();

    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;

    if ((winHeight / winWidth) > picHeight) {
        $(theItem).attr("width",winWidth - 240);
        $(theItem).attr("height",picHeight*winWidth - 300);
    } else {
        $(theItem).attr("height",winHeight - 300);
        $(theItem).attr("width",picWidth*winHeight - 240);
    };

    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2 + 120);
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2 + 100);
}

This should decrease the height and width by the totals of the margins, then offset the top and left with the margins needed for those.