Container with fixed aspect ratios

Fixed Ratio

// Parameters:
// ```scss
// $ratio : aspect ratio
// $type  : wrap or crop. Defaults to default
// ```
//
// Usage:
// ```scss
// .img-cover {
//   @include fixed-ratio($ratio: 16/9);
// }
//
// .img-crop {
//   @include fixed-ratio($ratio: 4/3, $type: crop);
// }
//
// .img-wrap {
//   @include fixed-ratio($ratio: 1.618/1, $type: wrap);
// }
// ```
// 
// **Requires** : _layoutProperties, _chainProperties, _calcFallback, _pseudo
//
// Styleguide 2.16

@mixin fixed-ratio($ratio, $type: default, $crop-dir: null) {
  @extend %overflow-hidden;
  @extend %position-relative;
  
  @include pseudo($element: before, $display: show) {
    height: 0;
    
    @include calc($property: padding-top, $expression: "1 / #{$ratio} * 100%", $default: #{(1 / $ratio) * 100%});
  }
  
  @if $type == wrap {
    // centered child element    
    &__wrap {
      @extend %trbl-0;
      @extend %margin-auto;
    
      @include chain(max-width max-height, 100%);
    }
  } @else if $type == crop {
    // cropped child element
    &__wrap {
      @extend %position-absolute;
      @extend %margin-auto;
    
      @include chain(top right bottom left, -9999em);
      
      @if $crop-dir == height {
        max-height: none;
        max-width: 100%;
      } @else if $crop-dir == width {
        max-height: 100%;
        max-width: none;
      } @else {
        @include chain(max-width max-height, none);
      }
    }
    
    .csstransforms & {
      transform-style: preserve-3d;
      
      &__wrap {
        transform: translate(-50%, -50%);
        
        @include chain(top left, 50%);
        @include chain(right bottom, auto);
      }
    }
  } @else {
    @extend %margin-auto;
    
    // background-image
    background: {
      position: 50%;
      repeat: no-repeat;
      size: cover;
    }
  }
}