SCSS Mixins to help create a container than stays as full-screen as possible while maintaining given proportions

contain-in-proportion.scss

$aspect-y: 16;
$aspect-x: 9;

$min-height: 80px;
$min-width: 160px;

$max-height: 900px;
$max-width: 1700px;

@mixin contain($aspect-y, $aspect-x) {
  $aspect: $aspect-y / $aspect-x;

  width: 100vw;
  height: 100vw / $aspect;

  @media (min-aspect-ratio: #{$aspect-y}/#{$aspect-x}) {
    width: 100vh * $aspect;
    height: 100vh;
  }
}

@mixin min-dimensions($aspect-y, $aspect-x, $min-width: null, $min-height: null) {
  $aspect: $aspect-y / $aspect-x;

  @if $min-width == null {
    $min-width: 0;
  }

  @if $min-height == null {
    $min-height: 0;
  }

  min-width: max($min-width, $min-height * $aspect);
  min-height: max($min-height, $min-width / $aspect);
}

@mixin max-dimensions($aspect-y, $aspect-x, $max-width: null, $max-height: null) {
  $aspect: $aspect-y / $aspect-x;

  @if $max-width == null {
    $max-width: $max-height * 1e9;
  }

  @if $max-height == null {
    $max-height: $max-width * 1e9;
  }

  max-width: min($max-width, $max-height * $aspect);
  max-height: min($max-height, $max-width / $aspect);
}

/**
 *
 * * Used as:
 *
 * .contain {
 *   @include contain($aspect-y, $aspect-x);
 *   @include min-dimensions($aspect-y, $aspect-x, $min-width, $min-height);
 *   @include max-dimensions($aspect-y, $aspect-x, $max-width, $max-height);
 * }
 * 
 *
 * * Outputs:
 * 
 * .contain {
 *   width: 100vw;
 *   height: 56.25vw;
 *   min-width: 160px;
 *   min-height: 90px;
 *   max-width: 1600px;
 *   max-height: 900px;
 * }
 * 
 * @media (min-aspect-ratio: 16 / 9) {
 *   .contain {
 *     width: 177.77778vh;
 *     height: 100vh;
 *   }
 * }
 *
 */