Ensure an element retains a specified aspect ratio

Question

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?

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.

Answer 1

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/

Answer 2

This question's a few weeks old now, but there is a pure CSS way to accomplish this. Thanks to Danield for using it to answer this question. It uses the vw and vh units, like so:

#wrapper {
    height:75vw;
    max-height:100vh; /* max-height / height = aspect ratio */
    width:100vw;
    max-width:133.3333vh; /* max-width / width = aspect ratio */
    position:absolute;
}

The bad news is that support is iffy in current mobile browsers and in IE before version 11.

Answer 3

Found a way. This may be rough but it should get you going. Set the element's height to zero and then use a percentage for the padding.

jsFiddle example

For example, 4:3:

div {
    height: 0;
    padding-bottom: 75%;
    background: #999;
}

For example, 16:9

div {
    height: 0;
    padding-bottom: 56%;
    background: #999;
}

Answer 4

Unfortunately no.

I've proposed once on www-styles WG @ W3C construction like this:

div {
  width: 50%;
  height: width(56.25%); /* 16:9 ratio */
}

but no one from browser vendors expressed any interest at that moment.

And anyway that solution above allows to define ratio of boxes only. But layout model used by CSS does not allow to define inscribing declaratively.