CSS Aspect Ratio Visualizer — 6 Device Viewports

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

Visualize any CSS aspect ratio 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

01◑
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).
02⊟
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.
03◉
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.
04⎘
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.

See it used in real designs

Browse hand-coded collections that put this tool to work.

Layouts24 examples

24 CSS Grid Layouts