Contains an element within a window, maintaining aspect ratio. Includes helper mixins to deal with min and max dimensions.

contain-within-window.scss

@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);
}

/*
 * Usage:
$aspect-y: 16;
$aspect-x: 9;

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

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

.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;
  }
}

 *
 */