Edit in JSFiddle

/*-------------------------COPY&PASTE------------------------------*/
function aspectRatioHD(){if(2==arguments.length){var d=function(a){a=parseFloat((""+a).replace(/[^0-9.]/g,""));return a==a?a:void 0},a=function(a){var b={},c;for(c in a)if(a.hasOwnProperty(c))switch(c.toLowerCase()){case "height":b.h=d(a[c]);break;case "width":b.w=d(a[c])}if("number"!=typeof b.h||b.h!=b.h)b.h=void 0;if("number"!=typeof b.w||b.w!=b.w)b.w=void 0;return b},b=a(arguments[0]),a=a(arguments[1]);if(b.w&&b.h&&a.w&&a.h)return Math.round(a.w/a.h*100)/100==Math.round(b.w/b.h*100)/100?(b=function e(a,
b){return b?e(b,a%b):a},b=b(a.w,a.h),[a.w/b,a.h/b]):a.w/a.h==b.w/b.h;if(b.w&&b.h&&!a.w&&a.h)return Math.round(b.w/b.h*a.h);if(b.w&&b.h&&a.w&&!a.h)return Math.round(a.w/(b.w/b.h));if(!b.w&&b.h&&a.w&&a.h)return Math.round(a.w/a.h*b.h);if(b.w&&!b.h&&a.w&&a.h)return Math.round(b.w/(a.w/a.h))}else throw Error("Invalid Amount of Arguments. Must have 2 arguments such as: [{height:1,width:2},{height:3}]");};
/*-------------------------COPY&PASTE------------------------------*/

/*-----------THE FOLLOWING IS SIMPLY FOR THE EXAMPLE---------------*/
$(function() {
	$(document).on('change keyup', 'input', function(e) {
  	var oh = parseFloat($('#oH').val().replace(/[^0-9.]/g, '')),
    		ow = parseFloat($('#oW').val().replace(/[^0-9.]/g, '')),
        nh = parseFloat($('#nH').val().replace(/[^0-9.]/g, '')),
        nw = parseFloat($('#nW').val().replace(/[^0-9.]/g, ''));
     
     if (oh && ow && nh && nw) {
     	switch(this.id) {
      	case "oH":
      	case "oW":
        	if (nh) $('#nW').val(nw = aspectRatioHD({ "height": oh, "width": ow }, { "height": nh }));
          else $('#nH').val(nh = aspectRatioHD({ "height": oh, "width": ow }, { "width": nw }));
          break;
      	case "nH":
        	if (oh && ow) $('#nW').val(nw = aspectRatioHD({ "height": oh, "width": ow }, { "height": nh }));
        	else if (oh) $('#oW').val(ow = aspectRatioHD({ "height": oh }, { "height": nh, "width": nw }));
          else $('#oH').val(oh = aspectRatioHD({ "width": ow }, { "height": nh, "width": nw }));
          break;
      	case "nW":
        	if (oh && ow) $('#nH').val(nh = aspectRatioHD({ "height": oh, "width": ow }, { "width": nw }));
        	else if (oh) $('#oW').val(ow = aspectRatioHD({ "height": oh }, { "height": nh, "width": nw }));
          else $('#oH').val(oh = aspectRatioHD({ "width": ow }, { "height": nh, "width": nw }));
          break;
      }
     }
     else if (oh && ow) {
     	if (nh) $('#nW').val(nw = aspectRatioHD({ "height": oh, "width": ow }, { "height": nh }));
     	if (nw) $('#nH').val(nh = aspectRatioHD({ "height": oh, "width": ow }, { "width": nw }));
     }
     else if (nh && nw) {
     	if (oh) $('#oW').val(ow = aspectRatioHD({ "height": oh }, { "height": nh, "width": nw }));
     	if (ow) $('#oH').val(oh = aspectRatioHD({ "width": ow }, { "height": nh, "width": nw }));
     }
     
     var ar = (oh && ow && nh && nw) ? aspectRatioHD({ "height": oh, "width": ow }, { "height": nh, "width": nw }) : '';
     $('#ar').val(ar ? ar[0] + ':' + ar[1] : '')
  })
  .on('click', 'button', function(e) {
  	$('input').each(function(i){ $(this).val(0); });
  })
  
  $('input:first').change();
})