如何在窗口调整大小和方向更改时使脚本调整图像和 div 的大小答案

【问题标题】：How to make script resize images and divs on window resize and orientation change如何在窗口调整大小和方向更改时使脚本调整图像和 div 的大小
【发布时间】：2016-02-13 14:55:36
【问题描述】：

我目前正在使用以下 javascript 将图像大小调整为其父级的大小，同时保持纵横比并保持父级 div 正方形。所以我有一个矩形框，矩形根据方向拉伸到最大宽度或最大高度。这在第一次加载时效果很好，但是我无法让图像和 div 在页面方向更改时调整大小或调整大小以使其正常工作。有任何想法吗。我试过使用window.resize 和window.orientation 监听器。

原始代码来自： Scale, crop, and center an image...

var aspHt = $('.aspectcorrect').outerWidth();
$('.aspectcorrect').css('height', aspHt + 'px').css('width', aspHt + 'px');  

function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {
    var result = {
        width : 0,
        height : 0,
        fScaleToTargetWidth : true
    };

    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }

    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;

    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;

    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    } else {
        fScaleOnWidth = !fLetterBox;
    }

    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    } else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);

    return result;
}

function RememberOriginalSize(img) {
    if (!img.originalsize) {
        img.originalsize = {
            width : img.width,
            height : img.height
        };
    }
}

function FixImage(fLetterBox, div, img) {

    RememberOriginalSize(img);

    var targetwidth = $(div).width();
    var targetheight = $(div).height();
    var srcwidth = img.originalsize.width;
    var srcheight = img.originalsize.height;
    var result = ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox);

    img.width = result.width;
    img.height = result.height;
    $(img).css("left", result.targetleft);
    $(img).css("top", result.targettop);
}

function FixImages(fLetterBox) {
    $("div.aspectcorrect").each(function(index, div) {
        var img = $(this).find("img").get(0);
        FixImage(fLetterBox, this, img);
    });
}

window.onload = function() {
    FixImages(true);
};

【问题讨论】：

如果你做一个 jsfiddle 我会帮忙

标签： javascript jquery css resize

【解决方案1】：

在$(window).resize()之后调用.resize()：

$(window).resize( function(){

  var height = $(window).height();
  var width = $(window).width(); 

  if(width>height) {
    // Landscape
    $("#landscape").css('display','none');
  } else {
    // Portrait
    $("#landscape").css('display','block');
    $("#landscape").click(function(){
        $(this).hide();
    });
  }
}).resize();

【讨论】：

我已经尝试过了，但是它会不正确地影响图像，因为它们尚未加载。在更改图像之前，我必须使用 window.onload 等待图像完全加载
这到底是对的。只需要更新我的逻辑。

【解决方案2】：

我知道我错过了什么。 javascript的第一位是设置高度和宽度的样式。回想.outerHeight 时，它仍在使用内联样式来计算宽度，因此没有调整 div 的大小。我只是使用.removeAttr('style') 先删除该属性，然后进行调整大小。现在工作。我只是使用了$(window).on("resize", resizeDiv) 并将我的大小调整封装到一个名为resizeDiv 的函数中

function resizeDiv() {
    var asp = $('.aspectcorrect');
    asp.removeAttr("style");
    var aspHt = asp.outerWidth();
    asp.css('height', aspHt + 'px').css('width', aspHt + 'px'); 
    FixImages(true);
}

【讨论】：