如何使窗口大小和方向變化腳本調整圖像和div

我目前使用下面的JavaScript來調整圖像的大小，它的父母，同時保持長寬比和保持父div的平方。所以我有一個矩形框，根據方向拉伸到最大寬度或最大高度。這在第一次加載時效果很好，但是我無法獲取圖像和div以調整頁面方向更改或調整大小以適應工作。有任何想法嗎。我曾嘗試使用window.resize和window.orientation聽衆。 Scale, crop, and center an image...如何使窗口大小和方向變化腳本調整圖像和div

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

來源

2016-02-13 user1881482

，如果你做的jsfiddle – DelightedD0D

呼叫.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();

來源

2016-02-13 06:27:54

我已經試過，我會幫助功能，但它不恰當地影響到圖像，因爲他們還沒有加載。我必須使用window.onload來等待圖像完全加載，然後才能更改它們。 – user1881482

這是正確的。只需要更新我的邏輯。 – user1881482

我想通了什麼我失蹤了。 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); 
}

來源

2016-02-13 06:55:36 user1881482

如何使窗口大小和方向變化腳本調整圖像和div

回答

相關問題