Aspect Ratio

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

Introduction

Aspect Ratio Sizes

Breakpoint Modifiers?

Embedding Video