Question

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

Answer 1

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.