需要随着宽度变化自动调整 div 高度答案

【问题标题】：Need an auto resize for div height with width change需要随着宽度变化自动调整 div 高度
【发布时间】：2014-04-25 19:38:49
【问题描述】：

您好，我需要一个脚本来不断检查 div 大小，在调整窗口大小时自动调整 div 高度以维持纵横比 (3.2)。

这是我为 jQuery 设计的，但我不知道如何让它工作。初始尺寸为 640x200px。

/* this is meant to use aspect ratio for slideshow height */
$('#myDiv').css({'height' : $('#slideshow').width()/3.2});

如果有人能给我一个 JSfiddle/Codepen 的例子那就太好了！

【问题讨论】：

标签： jquery html responsive-design aspect-ratio

【解决方案1】：

如果可以为您的应用程序带来价值，您可以遵循 @girardengo 的方式，或者采用 bootsrap 框架进行响应式设计

【讨论】：

【解决方案2】：

你可以使用jquery plugin resize:

<script src="https://raw.githubusercontent.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.js"></script>
jQuery(function(){
  // Bind the resize event. When any test element's size changes, update its
  // corresponding info div.
  jQuery('#test').resize(function(){


    // Update the info div width and height - replace this with your own code
    // to do something useful!
    jQuery('#log').append('resize ');
});


});

<div>
   <div id="test" style="width:100%;float:left;background-color:red;">my text</div>
</div>

<div id="log"></div>

【讨论】：