Skip Navigation

Photo by Jenna Brummond  on Unsplash

Aspect Ratios

Aspect Ratio components are ideal for embedding video, maps, or anything where a width to height ratio must be maintained.

Aspect Ratio Sizes

Available aspect ratio sizes shown in Figure 1.

16x9

3x2

4x3

1x1

<div class="aspect-ratio-16x9">...</div>

<div class="aspect-ratio-3x2">...</div>

<div class="aspect-ratio-4x3">...</div>

<div class="aspect-ratio-1x1">...</div>
Figure 1

Breakpoint Modifiers

Aspect ratio utilities accept breakpoint modifiers.

<!-- With breakpoint modifier -->

<div class="aspect-ratio-16x9--lg">...</div>
Figure 2

Embedding Video

A practical use for aspect ratios is for embedding video into a page. Consider the following example: 

<iframe
    class="aspect-ratio-16x9"
    src="..."
    frameborder="0"
    allow="autoplay;"
    allowfullscreen>
</iframe>
Figure 3