带有边框的jQuery全屏图像

Question

我有一些代码可以为我提供一个保持原始比例的全屏图像（即横向完全拉伸宽度方式和纵向高度方式）。我需要能够在页面周围有不同的边框（即顶部：100，左和右：120，底部：200），图像将停止并且不会侵入。我有什么简单的解决方法吗？

感谢任何帮助！

 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);
}

亲爱的主......请有人帮助我！

Swatkins 的回答确实给了我边框，但图像没有按约束比例缩放。

我正在使用 Malihu 的这个很棒的插件： http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery

但正如我上面所说的那样，只是试图在图像周围设置不同的边框。

任何帮助都会很棒

Answer 1

在这里检查小提琴： http://jsfiddle.net/leifparker/CSS5e/2/

此图片将在点击时调整大小。边框边距根据附加到 img 的数据属性 (fullmargins) 设置。它遵循以像素为单位的常规边距简写（上、右、下、左）。

目前正在制作动画，但您可以将动画上的延迟设置为 0 以即时调整大小。

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))});

Answer 2

未测试，但您可以尝试：

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);
}

这应该通过边距的总和来减少高度和宽度，然后用所需的边距偏移顶部和左侧。