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（）

回答

相关问题