PreserveAspectRatio.js

function preserveAspect() {
  var scaled = $("#scaled");
  scaled.height("100%");
  scaled.width("100%");
  scaled.css("box-sizing", "border-box");
  var ratio = 16/9;
  var w = scaled.outerWidth();
  var h = scaled.outerHeight();

  if (w > ratio*h) {
    scaled.width(ratio*h);
    // horizontal centering is done using margin:auto in CSS
  } else if (h > w/ratio) {
    var newHeight = w/ratio;
    scaled.height(newHeight);
    // for vertical centering:
    scaled.css({marginTop: ($("body").height()-newHeight)/2});
  }

}
$(document).ready(function() {
    preserveAspect();
    $(window).resize(preserveAspect);
});

https://stackoverflow.com/questions/21034420/ensure-an-element-retains-a-specified-aspect-ratio