Search code examples
javascriptcssscalingaspect-ratio

Ensure an element retains a specified aspect ratio

Is there anyway to specify an aspect ratio in CSS such as 4:3 or 16:9 and then have the div (container) block fit the current window width and height?

enter image description here

Quite a simple question hopefully it has a relatively simple answer.

Edit: those still interested a great example of achieving this using only styles would be Bootstrap's responsive helpers classes.

Solution

  • For this I fear you'll need some JS. I used jQuery here:

    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);
});

    Explanation:

    1. First we scale up our div to 100% in width and height so that we know how much space it has.
    2. Then we look up if it is too wide which means that the width is more than height times ratio.
      • If so, change width. Height is at 100% already.
      • Otherwise it might be too high, in which case we want the scale to be width divided through ratio. To center vertically we use a margin-top set to (window_height - element_height) / 2.
    3. If neither of both rules apply, the div is scaled properly already.
    4. In the end we add event listeners for when document is fully loaded and whenever the window size changes.

    Full code and working example here: http://jsbin.com/efaRuXE/5/