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

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

带边框的Jquery全屏图像

2 个答案: