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

Answer 2

试试这个：

$(window).on('load resize', function(){
   dim();
});

---

拉出函数外部的变量声明并在函数内部使用该变量，如下所示：

var slideamount; 
var $width = $( window ).width();
var $height = $( window ).height();
function dim() {

    $("#dimensions").html(width + " x " + height);

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

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

dim();

$( window ).on('load ready',function() {
    dim();  
});