A Sassy Mixin for maintaining a responsive aspect ratio. Include this on a wrapper element.

_aspect-ratio-mixin.scss

// For an aspect ratio of 16:9 use like this:
// .wrapper-element {
//    @include aspect-ratio(16, 9);
//  }
@mixin aspect-ratio($width, $height) {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-top: calc(#{$height} / #{$width} * 100%);

  *:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}