All processing runs in your browser — no files or inputs are uploaded to a server.
Set the aspect ratio with a preset (16:9, 4:3, 21:9, 1:1, 3:2, 9:16) or type a custom `W:H` pair. Enter either the width or the height, and the other side calculates instantly. The output panel shows both pixel values, the simplified ratio (e.g., `1920:1080` → `16:9` after dividing by the GCD), and the CSS `aspect-ratio` declaration you can paste straight into a stylesheet.
Reach for this when sizing a hero image, an embedded video, a responsive iframe, or a card thumbnail. The CSS `aspect-ratio` property (Chrome 88+ / Firefox 89+ / Safari 15+, ~95% browser support by 2026) is the modern way to enforce ratios — set the width and the height follows automatically, regardless of viewport size. The legacy padding-bottom trick (`padding-bottom: 56.25%` for 16:9) is still safe to use for older browsers but should be replaced when the build target allows.
ratio: 16:9 width: 1200
width: 1200 height: 675 CSS: aspect-ratio: 16 / 9;
A 1200×675 image fits a typical 1200-wide content column with the standard widescreen video ratio. Pair with `width: 100%; aspect-ratio: 16 / 9;` in CSS so the image scales responsively while keeping its proportions. For retina output, export at 2× (2400×1350) and let the browser downscale.
ratio: 9:16 height: 1920
width: 1080 height: 1920 CSS: aspect-ratio: 9 / 16;
1080×1920 is the native resolution of vertical short-form video — Instagram Reels, TikTok, YouTube Shorts all encode at this size. The CSS expression `aspect-ratio: 9 / 16` (note: width first, then height — same as the video frame) constrains an embedded preview to the same proportions on the web. Mobile-first product pages increasingly include 9:16 sections for promotional video.
width: 2560 height: 1080
ratio (raw): 2560:1080 ratio (simplified): 64:27 (GCD(2560, 1080) = 40)
A 2560×1080 ultrawide monitor is `64:27`, not exactly `21:9` as marketing tends to round it to (21:9 is `2520:1080`). The simplification step divides both sides by the greatest common divisor. Marketing aspect ratios are convenient shorthands — designers should keep the exact pixel dimensions when laying out for a specific display.
`aspect-ratio` for everything supporting it (Chrome 88+, Firefox 89+, Safari 15+ — released early 2021, ~95% global support by 2026). It is one declaration, works with any width including intrinsic / `max-content`, and reflows correctly when content above it changes. The padding-bottom trick is the polyfill: wrap content in a container with `padding-bottom: 56.25%` (for 16:9), then absolutely position the child to fill it. Use the polyfill only when targeting browsers older than 2021 — most modern web stacks no longer need it.
**16:9** — HD / 4K video, most laptop and TV screens, YouTube default, the de facto desktop standard since ~2008. **9:16** — vertical mobile video (TikTok, Reels, Shorts). **4:3** — traditional TV, iPad, older monitor; still default for Lightroom exports if you do not change it. **3:2** — 35mm film, traditional DSLR, Surface devices. **21:9 / 64:27** — ultrawide monitor, cinematic film. **1:1** — Instagram square (less common since 2018), profile photos. **3:4 / 4:5** — Instagram portrait, popular for editorial photography on mobile.
Film and cinema use a decimal ratio with the second number fixed at 1, so width is the divisor: 16/9 ≈ 1.778, hence `1.778:1`. Web and video tools use the integer form `16:9`. They are the same ratio. Film also uses `2.39:1` (modern anamorphic / "scope") and `1.85:1` ("flat"), which correspond to no clean integer pair — film historically used decimal because the projection apertures were not designed around pixel grids.
Modern syntax — one declaration: ```css iframe { width: 100%; aspect-ratio: 16 / 9; } ``` Legacy syntax for pre-2021 browsers: ```css .video-wrap { position: relative; padding-bottom: 56.25%; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; } ``` 56.25% is `9 / 16 × 100`. Some embeds (YouTube, Vimeo) also accept a query parameter `?aspect=16:9` to lock the player, but the CSS approach is the universal answer.
Google Search prefers landscape images at least 1200px wide for rich results, and the aspect ratio should be near 16:9 for visibility in carousels. Open Graph (`og:image`) recommends 1200×630 (~1.91:1) — narrower than 16:9 and chosen specifically for Facebook / LinkedIn / Twitter card previews. Schema.org `ImageObject` accepts `width` and `height` so crawlers can pick the right thumbnail. Square (1:1) images travel worst because they get cropped on most platforms; vertical (9:16) is mobile-only and dropped on desktop carousels.
Two common causes. **Pillarboxing** (black bars left / right) happens when you put 4:3 content in a 16:9 frame; **letterboxing** (black bars top / bottom) is the reverse. The player keeps the source ratio and fills the rest with black to avoid stretching faces. The fix is to re-export the source at the target ratio (crop or pan-and-scan), or to set the container `object-fit: cover` if cropping the edges is acceptable. **Embedded `<video>` defaults** to its native aspect ratio regardless of the parent element's `aspect-ratio` — the parent shrinks around the inner video.
Aspect ratio is the ratio of width to height of a rectangle — a single number `W:H` (or the decimal `W/H`) that captures shape without specifying size. 1920×1080 and 3840×2160 are both 16:9; their *shape* is identical even though their *size* differs by 4× area. The simplification step is just GCD division: divide both sides by their greatest common divisor to get the smallest integer pair. 1920 ÷ 120 = 16, 1080 ÷ 120 = 9.
The choice of ratio is driven by **device standardization** more than by aesthetic preference. The cinema industry standardized on 1.85:1 and 2.39:1 in the 1950s as a response to television (which was 4:3, then 16:9). Computer monitors moved from 4:3 to 16:10 in the early 2000s and then to 16:9 around 2008 as TV manufacturers consolidated production lines. Mobile photography reset the cycle: TikTok's 9:16 success pushed Instagram and YouTube to add vertical-first product surfaces around 2018–2020. Each new dominant ratio gets a CSS preset, an export option in Lightroom, and an iframe sizing convention within a year or two.
Three adjacent concepts shape responsive design. **CSS `aspect-ratio`** (Web Spec, shipped 2021) replaces the padding-bottom hack and makes responsive media trivial — set the width, the height follows. **Container queries** (`@container`, shipped 2022–2023) let a single component adapt to its parent's width, so the same card can be 16:9 in a wide grid and 4:5 in a sidebar without media queries. **`object-fit`** controls what happens when content does not match the container aspect ratio — `cover` crops to fill, `contain` letterboxes to fit, `fill` distorts. The combination of `aspect-ratio` + `object-fit: cover` is the modern default for responsive thumbnails.
Design linear and radial CSS gradients visually. Drag color stops, adjust the angle, and copy the ready-to-use background CSS.
Convert between HEX, RGB, and HSL with an accurate live preview.
Check WCAG contrast ratios between two colors. Instant AA / AAA pass status for normal text, large text, and UI components.
Generate a BlurHash placeholder string from any image. Compact ~30-byte hash that previews as a blurred image — perfect for image loading placeholders on Next.js, Unsplash-style feeds, and SSR.
aspect-ratio: 16 / 9;