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

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


        <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.


    <!-- 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:


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