Tailwind CSS Aspect Ratio

Control the aspect ratio of elements with Tailwind utilities.
Click any box to copy the class to your clipboard.

Built-in Utilities

aspect-auto

auto

Natural aspect ratio

Click to copy

aspect-square

1:1

Square

Click to copy

aspect-video

16:9

Widescreen video

Click to copy

Common Aspect Ratios

Using arbitrary values with bracket notation

aspect-[1/1]

1:1

Square

Click to copy

aspect-[4/3]

4:3

Classic photo/TV

Click to copy

aspect-[16/9]

16:9

Widescreen video

Click to copy

aspect-[21/9]

21:9

Ultrawide

Click to copy

aspect-[3/2]

3:2

Classic 35mm photo

Click to copy

aspect-[2/3]

2:3

Portrait photo

Click to copy

aspect-[9/16]

9:16

Vertical/mobile video

Click to copy

aspect-[3/4]

3:4

Portrait classic

Click to copy

aspect-[5/4]

5:4

Medium format

Click to copy

Common Use Cases

Video Embeds

aspect-videoYouTube, Vimeo (16:9)

aspect-[21/9]Cinematic ultrawide

aspect-[9/16]TikTok, Reels, Shorts

Images & Avatars

aspect-squareProfile avatars

aspect-[4/3]Product thumbnails

aspect-[3/2]Blog post covers

Responsive Aspect Ratios

Combine with responsive prefixes to change aspect ratio at different breakpoints:

<!-- Square on mobile, video on tablet, ultrawide on desktop -->
<div class="aspect-square md:aspect-video lg:aspect-[21/9]">
  <img src="..." class="w-full h-full object-cover" />
</div>

Code Examples

Video Container

<div class="aspect-video w-full">
  <iframe
    src="https://youtube.com/embed/..."
    class="w-full h-full"
  ></iframe>
</div>

Image with Cover

<div class="aspect-[4/3]">
  <img
    src="..."
    class="w-full h-full object-cover"
  />
</div>

Avatar Placeholder

<div class="aspect-square w-12
  rounded-full bg-primary/20">
  <!-- Avatar content -->
</div>

Card Thumbnail

<div class="card">
  <div class="aspect-[3/2]">
    <img class="object-cover" />
  </div>
  <div class="card-body">...</div>
</div>

Quick Reference

Class	Ratio	CSS Output
`aspect-auto`	auto	`aspect-ratio: auto;`
`aspect-square`	1:1	`aspect-ratio: 1 / 1;`
`aspect-video`	16:9	`aspect-ratio: 16 / 9;`
`aspect-[1/1]`	1:1	`aspect-ratio: 1 / 1;`
`aspect-[4/3]`	4:3	`aspect-ratio: 4 / 3;`
`aspect-[16/9]`	16:9	`aspect-ratio: 16 / 9;`
`aspect-[21/9]`	21:9	`aspect-ratio: 21 / 9;`
`aspect-[3/2]`	3:2	`aspect-ratio: 3 / 2;`
`aspect-[2/3]`	2:3	`aspect-ratio: 2 / 3;`
`aspect-[9/16]`	9:16	`aspect-ratio: 9 / 16;`
`aspect-[3/4]`	3:4	`aspect-ratio: 3 / 4;`
`aspect-[5/4]`	5:4	`aspect-ratio: 5 / 4;`

About Aspect Ratios

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which is used to calculate auto sizes.

Tailwind provides aspect-auto, aspect-square, and aspect-video by default.

For any other ratio, use arbitrary values: aspect-[width/height] (e.g., aspect-[4/3])

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect aspect ratios, spacing, typography, colors, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →