Skip to contentSkip to footer
Delicate Arch, Arches National Park, Utah at daytime

Photo: Jenna Brummond

Aspect Ratio

Introduction

Natura11y’s aspect ratio utilities are ideal for embedding videos, maps, or any content where maintaining a specific width-to-height ratio is essential.

Aspect Ratio Sizes

Here are the available aspect ratio sizes (see Figure 1):

16x9

3x2

4x3

1x1

HTML
<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 can use breakpoint modifiers to adjust sizes at different screen widths.

HTML
<!-- With breakpoint modifier -->


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

Embedding Video

Aspect ratios are useful for embedding videos on a page. Here is an example:

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

Backdrop