One of the hurdles I faced when beginning to work with responsive designs was the lack of an obvious way to assign an aspect ratio to a container in CSS. This kind of thing can be handled with an image placeholder or Javascript, but neither is an elegant solution. Fortunately, with a little bit of digging, an answer soon presented itself!

The Box Model

CSS gives us an easy way to give an element a “responsive” width declaration relative to the browser window size or other containing parent element by simply using a percentage. What we don’t have is a way to simply declare a responsive height relative to width, maintaining an aspect ratio. The solution I found was a lot simpler than expected and came from examining the  W3C’s box model recommendations.

Padding to the Rescue

The answer lies in the box model’s padding specs, of all places. We find that when declaring percentages instead of fixed values for padding, the percentage is calculated based on the WIDTH of the element in question, even if we are declaring a vertical value such as padding-top or padding-bottom. To take advantage of this for the purpose of maintaing our height relative to width, all we have to do is a little math!

Let’s look at the CSS:

figure {
	width: 36%;
	margin: 8px auto;
}

div.stretchy-wrapper {
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
	background: black;
}

div.stretchy-wrapper > div {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	color: white;
	font-size: 24px;
	text-align: center;
}

And the HTML:

<figure>
	<div class="stretchy-wrapper">
		<div>Relative Aspect Ratio! Try resizing the browser.</div>
	</div>
</figure>

As you can see in the CSS, all we have to do is nest an element with 100% width inside a “responsive” percentage-based-width parent element, and then declare a % for bottom or top padding based on the ratio we want to maintain. To calculate the percentage needed for any aspect ratio we can use the following formula:

B / (A / 100) = C%

So for 16:9 (where 16 is A and 9 is B):

9 / .16 = 56.25 (%)

And that’s all there is to it!

Some Other Common Ratios

For the not so mathematically inclined, here are some of the percentages for common aspect ratios:

75% = 4:3
66.66% = 3:2
62.5% = 8:5

Have fun and happy coding!