jQuery(document).ready(function($) {
  $(window).on('load resize orientationchange',aspectRatioRespond);
    aspectRatioRespond();
});

function aspectRatioRespond(){
  mobileMax = 480;
  elements = jQuery('[data-ratio]');
  elements.each(function(){
    container = jQuery(this);
    var elRatio = container.data('ratio');
    var elLineHeight = ( typeof container.data('ratio-text') == 'boolean' ) ? container.data('ratio-text') : 0;

    var elMobileRatio = ( typeof container.data('mobile-ratio') == 'string' ) ? container.data('mobile-ratio') : container.data('ratio');
    if(container.width() < mobileMax){
      autoHeight = elMobileRatio;
    }else{
      autoHeight = elRatio;
    }
    ratio = autoHeight.match(/(\d+)\:(\d+)/);
    ratio = ratio[1] / ratio[2];
    container.height( container.width() / ratio );
    if( elLineHeight )
      container.css( {'line-height': (container.width() / ratio)+'px' } );
  });
}