Javascript 当窗口大小调整不到'；我工作不太好

我试着做一个脚本，当我点击调整大小的图片画廊；图像显示在屏幕中部的盒子里。但是如果窗口被调整大小，“原始”图像的宽度大于框的宽度；box的css必须更改

所以，如果框的宽度小于图像的宽度

$('#box').css('left', '0%');
$('#box').css('transform','translate3d(0%,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();
    });
});

$（文档）.ready（函数（）{
$（'#boximagini img'）。单击（函数（）{
$（“#immagine img:最后一个孩子”）.remove（）
var source=$（this.attr（'src'）；
var i2=新图像（）；
i2.onload=函数（）{
var largimage=i2.0宽度；
};
i2.src=来源；
$（'#immagine'）。附加（“”）
$（'#overlay'）.fadeIn（'fast'）；
$（'框'）.fadeIn（'慢'）；
var largbox=$（'#box'）.width（）；
if（大盒子'；
$（Laggiungi）。附录（“#larghezza”）；
if（大盒子

这是Jsfiddle

问题是当框的宽度是>图像的宽度时，他开始喷射，好像代码不知道框的实际宽度。通过跨度宽度****中的添加值，每次调整窗口大小时，您都可以看到框的宽度。如果单击左侧的第一个图像；一旦窗口超过图像的宽度（其自然宽度为488像素），他就开始给出问题

我希望你能帮助我

谢谢

这是一个解决方案：

我已经改变了我过去的代码，我对图像的宽度工作

$(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');
    //
    $('#box').css('left', '0%');
    $("#immagine img:last-child").css('width', '100%');
    //
    var widthimage = $("#immagine img:last-child").width();

    if (widthimage < i2.width) {
        $('#box').css('left', '0%');
        $('#box').css('transform', 'translate3d(0%,0,0)');
        $("#immagine img:last-child").css('width', '100%');
    } else {
        $('#box').css('left', '50%');
        $("#immagine img:last-child").css('width', '');
        $('#box').css('transform', 'translate3d(-50%,0,0)');
    }



    $(window).resize(function () {
         $('#box').css('left', '0%');
        $("#immagine img:last-child").css('width', '100%');
        var widthimage = $("#immagine img:last-child").width();           
        if (widthimage < i2.width) {
            $('#box').css('left', '0%');
            $("#immagine img:last-child").css('width', '100%');
            $('#box').css('transform', 'translate3d(0%,0,0)');

        } else {
            $('#box').css('left', '50%');
            $("#immagine img:last-child").css('width', '');
            $('#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();
});

$（文档）.ready（函数（）{
$（'#boximagini img'）。单击（函数（）{
$（“#immagine img:最后一个孩子”）.remove（）
var source=$（this.attr（'src'）；
var i2=新图像（）；
i2.onload=函数（）{
var largimage=i2.0宽度；
};
i2.src=来源；
$（'#immagine'）。附加（“”）
$（'#overlay'）.fadeIn（'fast'）；
$（'框'）.fadeIn（'慢'）；
//
$（'#box'）.css（'left'，'0%”）；
$（“immagine img:last child”）.css（'width'，'100%”）；
//
var widthimage=$（“#immagine img:last child”）.width（）；
if（宽度图像

}))

这是一个解决方案：

我已经改变了我过去的代码，我对图像的宽度工作

$(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');
    //
    $('#box').css('left', '0%');
    $("#immagine img:last-child").css('width', '100%');
    //
    var widthimage = $("#immagine img:last-child").width();

    if (widthimage < i2.width) {
        $('#box').css('left', '0%');
        $('#box').css('transform', 'translate3d(0%,0,0)');
        $("#immagine img:last-child").css('width', '100%');
    } else {
        $('#box').css('left', '50%');
        $("#immagine img:last-child").css('width', '');
        $('#box').css('transform', 'translate3d(-50%,0,0)');
    }



    $(window).resize(function () {
         $('#box').css('left', '0%');
        $("#immagine img:last-child").css('width', '100%');
        var widthimage = $("#immagine img:last-child").width();           
        if (widthimage < i2.width) {
            $('#box').css('left', '0%');
            $("#immagine img:last-child").css('width', '100%');
            $('#box').css('transform', 'translate3d(0%,0,0)');

        } else {
            $('#box').css('left', '50%');
            $("#immagine img:last-child").css('width', '');
            $('#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();
});

$（文档）.ready（函数（）{
$（'#boximagini img'）。单击（函数（）{
$（“#immagine img:最后一个孩子”）.remove（）
var source=$（this.attr（'src'）；
var i2=新图像（）；
i2.onload=函数（）{
var largimage=i2.0宽度；
};
i2.src=来源；
$（'#immagine'）。附加（“”）
$（'#overlay'）.fadeIn（'fast'）；
$（'框'）.fadeIn（'慢'）；
//
$（'#box'）.css（'left'，'0%”）；
$（“immagine img:last child”）.css（'width'，'100%”）；
//
var widthimage=$（“#immagine img:last child”）.width（）；
if（宽度图像