jQuery 在调整大小时更改 img 的宽度有效，但在最大化时无效

Question

编辑/已解决:原因是我没有设置窗口宽度大于 1268 的情况，这对于平滑调整大小并不重要，但如果您通过最大化跳转到高于 1268 的值，则会产生影响。

---

如果我手动调整窗口大小，受影响的 div(.bannerbild、.banner)也会调整大小。不幸的是，他们并没有在最大化窗口时这样做。

#dimension div 在手动调整大小和最大化时显示正确的宽度和高度。

我在最新版本的 Chrome、IE、FF 和 Opera 中对此进行了测试。

编辑:我必须稍微改一下:如果窗口最大化然后“未最大化”，那么 div 确实会调整大小。 (尽管当我再次点击最大化按钮时，它们不会调整到最大宽度......)

var slideamount; 

function dim() {
    var width = $( window ).width();
    var height = $( window ).height();
    $("#dimensions").html(width + " x " + height);

    if ($( window ).width() <= 1268){
        $(".bannerbild").css({"width":$( window ).width()});
        $(".banner").css({"width":$( window ).width()});
        $("#main").css({"width":$( window ).width()});
    }   

    if($( window ).width() <= 1268) {
        slideamount = "-=" + ($( window ).width());
        return slideamount;
    }
    else {
        slideamount = "-=1268px"
        return slideamount;
    }           
}

dim();

$( window ).resize(function() {
    dim();  
});

Answer 1

一旦屏幕宽度恢复到大于 1268 像素，您就不会调整 div 的大小。仅当 div 变小时，您才调整其大小。我不确定您的 div 的原始宽度是多少，但只需将下面代码中的值替换为正确的值即可。

试试这个:

var slideamount; 

function dim() {
    var width = $( window ).width();
    var height = $( window ).height();
    $("#dimensions").html(width + " x " + height);

    if ($( window ).width() <= 1268){
        $(".bannerbild").css({"width":$( window ).width()});
        $(".banner").css({"width":$( window ).width()});
        $("#main").css({"width":$( window ).width()});
    }
    else {

        // Set this how ever you like for your original width
        var originalWidth = "1000px"; 

        // Set the widths of the divs back to their original values that you set
        $(".bannerbild").css({"width": originalWidth);
        $(".banner").css({"width": originalWidth);
        $("#main").css({"width": originalWidth);
    }   

    if($( window ).width() <= 1268) {
        slideamount = "-=" + ($( window ).width());
        return slideamount;
    }
    else {
        slideamount = "-=1268px"
        return slideamount;
    }           
}

dim();

$( window ).resize(function() {
        dim();  
});