關於窗口大小和縱橫比縮放圖像

我有一個名爲home的ID設置爲圖像的部分的背景。圖像的縱橫比爲1.5。我寫了一些非常基本的JavaScript，以確保當窗口大小發生變化時，該部分按照圖像的高寬比進行縮放。在該部分的內部，我有一個與容器類的div的內容。此內容具有一定的垂直高度。我寫的基本javascript不允許該部分的高度小於內容的高度。因此，該部分停止按窗口大小進行縮放。我遇到的問題是，當您縮放超過該點的窗口然後返回時，該部分不會縮小。關於窗口大小和縱橫比縮放圖像

我已經創建了一個幫助解釋的小提琴手。 http://jsfiddle.net/Chadimoglou/Bpryg/我建議在移動模式下測試它。要重新創建我正在做的事情，請讓窗口全屏顯示。抓住底角並稍微調整大小以查看背景與縱橫比的調整大小。然後調整大小，使其小於紅色內容框的高度和寬度。之後，再次拉出，你應該看到我遇到的問題。以下是我的JavaScript的片段。

$(document).ready(function() { 

    var theWindow = $(window), 
    aspectRatio = 1920/1280; 

    function resizeBg() { 
    $("#home").width(theWindow.width); 
    if(($("#home").width()/aspectRatio) < $("#home > .container").height()) { 
     $("#home").width($("#home > .container").height()*aspectRatio); 
    } 
    $("#home").height($("#home").width()/aspectRatio); 
    } 

    theWindow.resize(resizeBg); 
    window.onload=resizeBg(); 

});

非常感謝您的幫助。

來源

2013-07-28 Chadimoglou

http://jsfiddle.net/Bpryg/3/

$(function() { 

    var $w = $(window), 
     $h = $('#home'),   // CACHE YOUR SELECTORS 
     aspectRatio = 1920/1280; 

    function resizeBg() { 
    $h.width($w.width());  // YOUR ERROR (should be width()) 
    if(($h.width()/aspectRatio) <= $("> .container", $h).height()) { 
     $h.width($(" > .container", $h).height()*aspectRatio); 
    } 
    $h.height($h.width()/aspectRatio); 
    } 

    $w.resize(resizeBg); 
    $w.onload=resizeBg(); 

});

來源

2013-07-28 21:10:43

我不是一個很好的JS編碼器，而是用邏輯去：

爲了保持縱橫比，你可以用JS修改CSS：How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

要知道你是否應該設置自動高度或寬度，你需要知道屏幕尺寸是否比你的圖像大，或者比你的圖像高寬比更高。只要比較兩個長寬比，那麼你就會知道哪一個會在汽車上。就像那樣，您的圖像將永遠不會在您的背景上留下未填充的部分，並且會根據客戶端長寬比和圖像寬高比擴展到全寬或全高。

您可以使用：

document.documentElement.clientWidth

和

document.documentElement.clientHeight

獲取客戶端窗口的大小和計算縱橫比。

來源

2013-07-28 21:12:20

關於窗口大小和縱橫比縮放圖像

回答

相關問題