Sass mixin for a responsive box that maintains an aspect ratio.

aspect-ratio-container.styl

aspect-ratio-container($horizontal, $vertical)
  height 0
  padding-bottom ( $vertical / $horizontal  * 100 ) %

maintain-ratio.scss

// Maintain ratio mixin. Great for responsive grids, or videos.
// https://gist.github.com/brianmcallister/2932463
// 
// $ratio - Ratio the element needs to maintain.
// 
// Examples
// 
//   // A 16:9 ratio would look like this:
//   .element {
//     @include maintain-ratio(16 9);
//   }
@mixin maintain-ratio($ratio: 1 1) {
  @if length($ratio) < 2 or length($ratio) > 2 {
    @warn "$ratio must be a list with two values.";
  }

  $height: percentage(nth($ratio, 2) / nth($ratio, 1));
  
  height: 0;
  padding-bottom: $height;
}