CSS Aspect Ratio Calculator (Multi-Viewport Preview) — Tailwind / React Export

16:9 · Landscape

Aspect ratio · 16:9

16 : 9

At real device sizes

iPhone390 × 844

iPad820 × 1180

Laptop1280 × 800

Desktop1920 × 1080

Ultrawide3440 × 1440

Square 1k1024 × 1024

Advertisement

W16
H9
Decimal1.7778
Orient.landscape

About this generator

Calculate any CSS aspect ratio and see how it actually fits across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, and square. 10 curated presets covering the convergent ratios (16:9 video, 4:3 monitor, 21:9 ultrawide, 1:1 Instagram, 9:16 TikTok, golden, A4) plus custom W × H input that accepts decimals (1.618 for golden ratio, 1.414 for A4 √2).

Live computed values panel — simplified ratio, decimal, inverse, padding-bottom percentage, orientation. The exported CSS includes both the modern aspect-ratio rule AND the legacy padding-bottom fallback for projects targeting older browsers.

5 framework exports + URL permalink. No login, no watermark, no paywall. Free and MIT-licensed.

✦

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.