CSS Aspect Ratio Calculator

Free tool No sign-up

Common ratios

Aspect ratio · 16:9Decimal 1.7778 · Landscape

16 : 9

At real device sizes · the box maintains the ratio inside each viewport

iPhone390 × 844

iPad820 × 1180

Laptop1280 × 800

Desktop1920 × 1080

Ultrawide3440 × 1440

Square 1k1024 × 1024

.aspect-box {
  aspect-ratio: 16 / 9;
  width: 100%;
  /* The element will be sized to maintain 16:9 regardless of width */
}

/* Older browser fallback (padding-bottom hack) */
.aspect-box-fallback {
  position: relative;
  width: 100%;
  padding-bottom: 56.2500%;
}
.aspect-box-fallback > * {
  position: absolute;
  inset: 0;
}

Custom ratio

Width

Height

Type any positive numbers. Decimals work too — try 1.618 (golden) or 1.414 (A4 paper).

Computed values

Simplified16 : 9

Decimal1.7778

Inverse0.5625

Padding-bottom56.25%

Orientationlandscape

Padding-bottom % is the legacy fallback for old browsers without aspect-ratio support.

Browser support

aspect-ratio is supported in all modern browsers since 2021 (Chrome 88+, Safari 15+, Firefox 89+). For older browsers use the padding-bottom fallback in the CSS export.

About this generator

Calculate any CSS aspect ratio and visualize it across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, square. Computed values panel, padding-bottom fallback, export to CSS, Tailwind, styled-components, SCSS, React.

✦

Why use this Aspect Ratio Visualizer?

◐

See the box, not just the number

AI gives you "0.5625" (which is 9/16). This shows you a real 16:9 box rendered inside iPhone, iPad, laptop, desktop, ultrawide, and square viewports — at scale, simultaneously.

⊞

10 common ratio presets

YouTube 16:9, Instagram 1:1 and 4:5, TikTok 9:16, golden ratio, A4 paper, classic 4:3, photography 3:2, ultrawide 21:9. Pick from the canon, or type your own.

◉

Computed values panel

Decimal ratio, inverse, padding-bottom %, simplified W:H, and orientation — all updated live as you tune. The padding-bottom % is the legacy fallback for old browsers.

⎘

Five export formats

CSS aspect-ratio + padding-bottom fallback, Tailwind utility, styled-components, SCSS mixin, React inline-style. Drop straight into your stack.

◇

How to use this generator

Pick a preset (or type custom)

10 ratio presets cover the canon (16:9, 1:1, 21:9, golden, A4, etc.). For one-offs, type any positive numbers — decimals work too (1.618 for golden, 1.414 for A4 paper).

Compare across devices

The 6-viewport grid shows your box at iPhone, iPad, laptop, desktop, ultrawide, and square sizes — at scale. See if the ratio works as a hero on desktop AND on a phone.

Read the computed values

Decimal (0.5625), inverse (1.7778), padding-bottom % (56.25%), simplified ratio (16:9), orientation. Useful for the rare case you need the math, not just the CSS.

Export and ship

Switch tabs to CSS, Tailwind, styled, SCSS, or React. The CSS export includes both modern aspect-ratio AND the padding-bottom fallback for old browsers — both copy together.

◫

Aspect ratio reference

Value	Use for	Why
aspect-ratio: 16 / 9	`video`	YouTube embeds, video thumbnails, hero images. Default for any visual content. Browser support: all modern (since 2021).
aspect-ratio: 1 / 1	`square`	Instagram posts, profile avatars, image cards. Equal width and height — works everywhere.
aspect-ratio: 4 / 5	`IG portrait`	Instagram portrait posts (taller than wide). Better engagement than 1:1 on mobile feeds.
aspect-ratio: 9 / 16	`vertical video`	TikTok, Instagram Stories, Reels, YouTube Shorts. Phone-native vertical video.
aspect-ratio: 21 / 9	`cinematic`	Movie posters, ultrawide hero banners, panoramic photography. Reads as "premium" and "wide".
aspect-ratio: 1.618	`golden`	Classical proportion (φ). Used in print design for centuries. Subtle but pleasant for cards and content blocks.
padding-bottom: 56.25%	`legacy fallback`	Pre-2021 browsers. h/w × 100. Combined with position:relative on the parent and position:absolute inset:0 on children.

◈

Common aspect-ratio patterns

16:9 video embed (YouTube, Vimeo)

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Square image card (always 1:1)

.image-card {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Padding-bottom fallback (legacy browsers)

.aspect-fallback {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9 / 16 × 100 */
}
.aspect-fallback > * {
  position: absolute;
  inset: 0;
}

Tailwind aspect-ratio utility

<!-- Built-in utilities for common ratios -->
<div class="aspect-video">...</div>      <!-- 16/9 -->
<div class="aspect-square">...</div>     <!-- 1/1 -->

<!-- Arbitrary value for custom ratios -->
<div class="aspect-[21/9]">...</div>
<div class="aspect-[1.618/1]">...</div>

✦

Pro tips

Use object-fit with images

aspect-ratio sets the container size, but images inside need object-fit: cover to fill without distortion. Without it, images stretch to fill the box weirdly.

Width OR height, not both

Set width: 100% (or any width) and let aspect-ratio compute the height. Setting both width AND height conflicts with aspect-ratio — the aspect-ratio is ignored.

Mind the cumulative layout shift

Specifying aspect-ratio prevents Cumulative Layout Shift (CLS) when images load — the slot is reserved at the right size before the image arrives. Major Core Web Vitals win.

4:5 beats 1:1 on mobile feeds

Instagram and Pinterest both show 4:5 portrait posts more prominently than 1:1 squares. If your content is shareable, design at 4:5 to maximize feed presence.