当窗口大小调整效果不佳时，更改box的CSS

我试着做一个脚本，当我点击画廊的大小调整图像;图像显示在屏幕中间的方框中。但是，如果窗口被调整大小，并且"原始"图像的宽度大于框的宽度;Box的CSS必须改变。

如果box的宽度是<图像的宽度>

$('#box').css('left', '0%');
$('#box').css('transform','translate3d(0%,0,0)');

$('#box').css('left', '50%');
$('#box').css('transform','translate3d(-50%,0,0)');

这是js:

$(document).ready(function () { 
    $('#boximmagini img').click(function(){
        $("#immagine img:last-child").remove()
        var source= $(this).attr('src'); 
        var i2= new Image();
        i2.onload = function() {
            var largimage= i2.width;         
        };
        i2.src = source;
        $('#immagine').append("<img src="+source+" style='width: 100%;border-radius:10px; margin-top:30px'/>")
        $('#overlay').fadeIn('fast');
        $('#box').fadeIn('slow');
        var largbox=$('#box').width();
        if(largbox< i2.width){
            $('#box').css('left', '0%');
            $('#box').css('transform','translate3d(0%,0,0)');
        } 
        else {
            $('#box').css('left', '50%');
            $('#box').css('transform','translate3d(-50%,0,0)');
        }        
        $(window).resize(function() {
            var resizelargbox= $('#box').width(); 
            if (largbox != resizelargbox) {
                largbox = resizelargbox;
                var Laggiungi= '<span style="color: #fff">'+largbox+'</span><br>';
                $(Laggiungi).appendTo('#larghezza');
                if(largbox< i2.width){
                    $('#box').css('left', '0%');
                    $('#box').css('transform','translate3d(0%,0,0)');
                } 
                else {
                    $('#box').css('left', '50%');
                    $('#box').css('transform','translate3d(-50%,0,0)');
                }
            }
        }); 
    });
    $(".chiudi").click(function(){
        $('#overlay').fadeOut('fast');
        $('#box').hide();
    });
    //chiusura emergenza
    $("#overlay").click(function(){
        $(this).fadeOut('fast');
        $('#box').hide();
    });
});

这是jsfield http://jsfiddle.net/tvafw5Ls/

问题是，当box的宽度是> image的宽度时，他开始突然出现，好像代码不知道box的实际宽度。通过在span width ** **中添加的值，您可以看到每次调整窗口大小时框的宽度。如果你点击左边的第一张图片;一旦窗口超过图像的宽度(其自然宽度为488像素)，他就开始给出问题。

希望你能帮助我。

谢谢