aspect-ratio
Sets the aspect ratio of an element. A modern replacement for the padding-top hack. Used for video embeds, image containers, card layouts.
Class List
ar{W}-{H} — Specify ratio (e.g., ar16-9)
ar{N} — Single value (e.g., ar1 = square)
| Class | CSS | Description |
|---|---|---|
ar16-9 | aspect-ratio: 16 / 9 | Widescreen. Video, hero banners |
ar4-3 | aspect-ratio: 4 / 3 | Traditional photo. Gallery, product images |
ar1 | aspect-ratio: 1 | Square. Avatars, icons |
ar21-9 | aspect-ratio: 21 / 9 | Cinema wide. Banners, panorama |
Visual Comparison
Compares shapes each ratio creates at the same width.
16:9 widescreen — ar16-9
Standard ratio for YouTube, Vimeo videos
4:3 traditional photo — ar4-3
Default digital camera ratio, suitable for thumbnails
1:1 square — ar1
Avatars, profile photos, Instagram style
21:9 cinema — ar21-9
Movie trailers, ultra-wide banners
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| YouTube/Vimeo embed | ar16-9 | Standard video ratio |
| Photo gallery | ar4-3 | Default camera ratio, natural photo display |
| Avatar, profile photo | ar1 | Square + br50p for circle |
| Movie trailer banner | ar21-9 | Cinema widescreen ratio |
| Uniform card thumbnails | ar16-9 / ar4-3 | Unify various image ratios |
| Hero section | ar16-9 | Wide and low ratio for visual impact |
Class Details
ar16-9aspect-ratio: 16 / 9
Most universal widescreen ratio. Used for YouTube, Vimeo video players and hero banners.
<!-- Responsive video container -->
<div class="pr ar16-9 oh br8px">
<iframe src="https://www.youtube.com/embed/..." class="pa t0 l0 w100p h100p bn"></iframe>
</div>
<!-- Hero image -->
<img src="hero.jpg" alt="" class="ar16-9 w100p ofc br8px" />Common Combinations
pr ar16-9 oh | Responsive video container (for iframe) |
ar16-9 w100p ofc | 16:9 ratio fixed image |
ar16-9 w100p ofc br8px | Rounded corner hero image |
ar4-3aspect-ratio: 4 / 3
Traditional photo ratio. Default digital camera ratio, suitable for product images, galleries, thumbnails.
<!-- Product image gallery -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
<img src="product1.jpg" alt="" class="ar4-3 w100p ofc br8px" />
<img src="product2.jpg" alt="" class="ar4-3 w100p ofc br8px" />
<img src="product3.jpg" alt="" class="ar4-3 w100p ofc br8px" />
</div>
<!-- Photo card -->
<div class="oh br8px bg18181B">
<img src="photo.jpg" alt="" class="ar4-3 w100p ofc" />
<div class="p16px">Card content</div>
</div>ar1aspect-ratio: 1
Square ratio. Used for avatars, icon containers, Instagram-style feeds. Combined with br50p creates a circle.
<!-- Square avatar -->
<img src="avatar.jpg" alt="" class="ar1 w6rem ofc br50p" />
<!-- Icon grid -->
<div class="dg gtcr4-1fr gap16px sm-gtcr2-1fr">
<div class="ar1 bg18181B br8px df jcc aic">
<span class="fs2-4rem">★</span>
</div>
<div class="ar1 bg18181B br8px df jcc aic">
<span class="fs2-4rem">♥</span>
</div>
<div class="ar1 bg18181B br8px df jcc aic">
<span class="fs2-4rem">♪</span>
</div>
<div class="ar1 bg18181B br8px df jcc aic">
<span class="fs2-4rem">☀</span>
</div>
</div>ar21-9aspect-ratio: 21 / 9
Cinema widescreen ratio. Used for movie trailers, ultra-wide banners, panorama images.
<!-- Cinema banner -->
<div class="ar21-9 w100p oh br8px">
<img src="panorama.jpg" alt="" class="w100p h100p ofc" />
</div>
<!-- Ultrawide hero -->
<div class="ar21-9 w100p bg18181B br8px df jcc aic">
<h2>Ultrawide banner</h2>
</div>Video Embed Pattern
Responsive video pattern: pa t0 l0 w100p h100p iframe inside a pr ar16-9 oh container.
<!-- Responsive YouTube embed (16:9) -->
<div class="pr ar16-9 oh br8px">
<iframe
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
class="pa t0 l0 w100p h100p bn"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
allowfullscreen
></iframe>
</div>
<!-- Responsive Vimeo embed -->
<div class="pr ar16-9 oh br8px bg000000">
<iframe
src="https://player.vimeo.com/video/123456"
class="pa t0 l0 w100p h100p bn"
allowfullscreen
></iframe>
</div>Live Demo
Tips & Notes
Replaces padding-top hack
aspect-ratio fully replaces the old padding-top: 56.25% for 16:9. More intuitive and maintainable.
Combine with object-fit
Using ar16-9 with ofc creates ratio-preserving container-filling images. E.g.: ar16-9 w100p ofc
Specify only width or height
aspect-ratio auto-calculates the other dimension. Fixed width and height may override the ratio.