Aspect ratio

The aspect ratio foundation allows you to define and maintain consistent proportions for elements (like images, videos, or containers) across multiple breakpoints. It automatically generates responsive classes using predefined ratio values and breakpoint rules.

Naming conventions

.f--ar-{ratio}               // For all breakpoints
.f--ar-{breakpoint}-{ratio} // For specific breakpoints

How it works

The media-sizes mixin loops through:

A map of aspect ratios ($media-sizes)
A map of breakpoints ($ar-breakpoints)
Example:

$media-sizes: (
  a: 1.77777777,  // 16:9
  b: 1.33333333,  // 4:3
  c: 1.5,         // 3:2
  d: 1,           // 1:1
  e: 0.75,        // 3:4
  f: 0.33333333   // 1:3
);

How to use it

In HTML

<!-- Global 16:9 ratio -->
<div class="f--ar-a"></div>

<!-- 1:1 ratio applied only on tablets -->
<div class="f--ar-tabletm-d"></div>

In SCSS

// using @extend (recommended)
.c--media-a {
    @extend .f--ar-a;
}

// using the mixin directly (only if necessary)
.c--media-a {
    @include make-ar(map-get($media-sizes, a));
}

Codepen example:

Knowledge Check

Test your understanding of this section

Loading questions...