Ensure an element retains a specified aspect ratio
aspect-ratio, css, javascript, scaling
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:
- First we scale up our div to 100% in width and height so that we know how much space it has.
- 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.
- If neither of both rules apply, the div is scaled properly already.
- 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/
Problem
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.