SCSS or LESS classes for fixed common aspect ratios.

fixed-aspect.scss

/**
 * Fixed aspect containers.
 *
 * Credit: Nicolas Gallagher and SUIT CSS.
 */

.fixed-aspect {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  .fixed-aspect-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }

  /**
   * Horizontal aspect ratios.
   */

  /* Modifier class for 16:9 or wide aspect ratio */
  &.fixed-aspect-16-9,
  &.fixed-aspect-wide {
    padding-bottom: percentage((9 / 16));
  }

  /* Modifier class for 16:10 aspect ratio */
  &.fixed-aspect-16-10 {
    padding-bottom: percentage((10 / 16));
  }

  /* Modifier class for golden aspect ratio */
  &.fixed-aspect-golden {
    padding-bottom: percentage((10 / 16.18));
  }

  /* Modifier class for cinema aspect ratio */
  &.fixed-aspect-cinema {
    padding-bottom: percentage((1 / 2.39));
  }

  /* Modifier class for ultra wide aspect ratio */
  &.fixed-aspect-ultra-wide {
    padding-bottom: percentage((1 / 2.75));
  }

  /* Modifier class for polyvision aspect ratio */
  &.fixed-aspect-polyvision {
    padding-bottom: percentage((1 / 4));
  }

  /* Modifier class for 4:3 aspect ratio */
  &.fixed-aspect-4-3,
  &.fixed-aspect-standard {
    padding-bottom: percentage((3 / 4));
  }

  /**
   * Vertical aspect ratios.
   */

  /* Modifier class for 9:16 or vertical wide aspect ratio */
  &.fixed-aspect-9-16,
  &.fixed-aspect-wide-vertical {
    padding-bottom: percentage((16 / 9));
  }

  /* Modifier class for 10:16 aspect ratio */
  &.fixed-aspect-10-16 {
    padding-bottom: percentage((16 / 10));
  }

  /* Modifier class for vertical golden aspect ratio */
  &.fixed-aspect-golden-vertical {
    padding-bottom: percentage((16.18 / 10));
  }

  /* Modifier class for vertical cinema aspect ratio */
  &.fixed-aspect-cinema-vertical {
    padding-bottom: percentage((2.39));
  }

  /* Modifier class for 3:4 or vertical standard aspect ratio */
  &.fixed-aspect-3-4
  &.fixed-aspect-standard-vertical {
    padding-bottom: percentage((4 / 3));
  }

  /**
   * Square aspect ratio
   */

  /* Modifier class for 1:1 or square aspect ratio */
  &.fixed-aspect-1-1,
  &.fixed-aspect-square {
    padding-bottom: percentage(1);
  }
}