Need an auto resize for div height with width change

Question

Hi i need a script to check a div size constantly, automatically resizing the div height to sustain the aspect ratio (3.2) when a window is resized.

Here is what I came up with for jQuery, but I am not sure how to get it to work. The initial size would be 640x200px.

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

If anyone could give me a JSfiddle/Codepen example that'd be great!

Answer 1

You could follow @girardengo 's way, or alternatively esplore the bootsrap framework to make responsive design, if that could bring value in your application

Answer 2

you can use 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>