HTML基於寬度調整高度而不使用$（window）.resize（）

基本上，我希望元素大小與高度保持一定的比例，比如保持相同的值或寬度的50％。寬度由瀏覽器窗口大小決定。這樣做jQuery中，我只是喜歡寫東西用以下

$(window).resize(function() { 
    $element = $('.keep-ratio'); 
    $element.css("height", $element.css("width")); 
});

不過，我想知道是否有這樣做不使用.resize的更有效的方式（）。我問的原因是因爲我正在爲自己編寫一個插件，這個插件將應用於所有我想要保持一定寬高比的元素。理想情況下，插件只會改變元素的CSS樣式。

來源

2013-07-10 BringMeAnother

[http://stackoverflow.com/a/6615994/2359055](http://stackoverflow.com/a/6615994/2359055），您可以檢查這個答案 –

看好。我認爲這是僅使用CSS的理想解決方案。將全文閱讀。 – BringMeAnother

這是我寫的用來做類似的功能。我想讓我的側杆div與我的主要內容div一樣高。它可能會或可能不會幫助。

function resetEqualHeight() { 
    $(document).ready(function(){ 
     var sideHeight, mainHeight, maxHeight; 
     var sidebar = $("#sidebar"); 
     var main = $("#main"); 

     sideHeight = parseFloat(sidebar.css("height")); 
     mainHeight = parseFloat(main.css("height"));  

     if (sideHeight != mainHeight) { 
      if (sideHeight < mainHeight) { 
       maxHeight = mainHeight; 
      } else { 
       maxHeight = sideHeight; 
      } 

      maxHeight += 25; 

      main.css("height", maxHeight); 
      sidebar.css("height", maxHeight); 
     }    
    });

來源

2013-07-10 18:43:30 defaultNINJA

我確切地知道這段代碼是做什麼和抱歉的，但它並沒有真正回答我的問題。主要區別在於，無論您的瀏覽器大小如何，主要和側邊欄的高度都是恆定的。 – BringMeAnother

@BringMeAnother我知道，但我想你可以編輯條件語句和變量，你想得到並改變它們。奧維爾，祝你好運！ – defaultNINJA

HTML基於寬度調整高度而不使用$（window）.resize（）

回答

相關問題