responsive-height-maintain-ratio.js

// run resizer onload
resize_banner();

function resize_banner() {
ele = '#banner';
start_w = 900; //original width
start_h = 300; //original height

if (jQuery(ele).length) {
  widthofscreen = jQuery(window).width();
  end_w = widthofscreen;
  end_h = ((start_h*end_w)/start_w);

  // if it's desktop, make the transition smooth
  if (widthofscreen > 960) {
    jQuery(ele).animate({'width': end_w+'px'},500)
    jQuery(ele).animate({'height': end_h+'px'},500)
  }
  // if mobile, no animation
  else {
    jQuery(ele).css('width',end_w+'px')
    jQuery(lee).css('height',end_h+'px')
  }
}
}

// wait for window resizing to finish, then resize banner
jQuery(window).resize(function() {
  if(this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    jQuery(this).trigger('resizeEnd');
  }, 500);
});
jQuery(window).bind('resizeEnd', function() {
  resize_banner();
});