# Aspect Ratio

The Aspect Ratio utility uses the native CSS aspect-ratio property to maintain consistent proportions for elements. Perfect for images, videos, and containers that need to maintain specific width-to-height ratios across different screen sizes.

### Basic Usage

Use predefined aspect ratio classes to constrain element dimensions to specific proportions.
 These utilities apply the CSS `aspect-ratio` property directly to elements.

1:1

16:9

3:4

Aspect RatioBasic Usage

    <!-- Square aspect ratio -->
    <div class="aspect--1/1">...</div>

    <!-- Widescreen aspect ratio -->
    <div class="aspect--16/9">...</div>

    <!-- Portrait aspect ratio -->
    <div class="aspect--3/4">...</div>

## Available Aspect Ratios

Complete reference of all available aspect ratio utilities.

| Class | Ratio |
| --- | --- |
| `aspect--auto` | No constraints |
| `aspect--1/1` | 1:1 |
| `aspect--4/3` | 4:3 |
| `aspect--3/2` | 3:2 |
| `aspect--16/9` | 16:9 |
| `aspect--21/9` | 21:9 |
| `aspect--3/4` | 3:4 |
| `aspect--2/3` | 2:3 |
| `aspect--9/16` | 9:16 |
| `aspect--9/21` | 9:21 |

Previous

[Grid Create grid layouts with predefined column structures](/framework/docs/grid)

Next

[Responsive Adapt styles based on screen width using breakpoint prefixes](/framework/docs/responsive)