Aspect Ratio • Natura11y
Jump to main contentJump to website footer
Delicate Arch, Arches National Park, Utah at daytime

Photo by Jenna Brummond

Aspect Ratio

Introduction

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