chrisj
1/9/2019 - 8:07 PM

Responsive Aspect Ratio Mixin

Used to force a div to constrain to an aspect ratio as it scales horizontally.

responsive-aspect-ratio-mixin
content_copyfile_download
/**
 * Responsive Aspect Ratio
 *
 * Example: @include respondive-ratio(16, 9);
 */
@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote(( $y / $x ) * 100 + '%');
  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  }
  @else {
    padding-top: $padding;
  }
}