An easy way to maintain a specific ratio on fluid containers using only CSS.

ratios.less

/**
 * Ratios.less 
 *
 * Ben Jacobs <[email protected]> 2013/09/09
 * 
 * Inspired by a [blog post][1] on maintaing aspect ratio of fluid content
 * using only CSS.
 *
 * [1]: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio by ansciath
 */

.make-ratio(@width, @height) {
	&:after {
		padding-top: percentage(@height / @width);
	}
}

.ratio-container {
	display: inline-block;
	position: relative;
	width: 100%;

	&:after {
		content: '';
		display: block;
	}

	.ratio-element {
		position: absolute;
		top: 0;
		bottom:  0;
		left: 0;
		right: 0;
	}
}

&.ratio-4-3 { .make-ratio(4, 3); }
&.ratio-3-1 { .make-ratio(3, 1); }
&.ratio-3-2 { .make-ratio(3, 2); }
&.ratio-2-1 { .make-ratio(2, 1); }
&.ratio-1-1 { .make-ratio(1, 1); }