Darnly
Free tools

Aspect ratio calculator

Type a width and height, or pick a ratio and get the missing side. See the shape live in a YouTube player, a phone, a link preview or an Instagram post, then copy the CSS.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

1920 × 1080 px

When the shape doesn't match:
px
px
CSS
aspect-ratio: 16 / 9;
Tailwind
aspect-video
Padding-top hack for HTML emails and old browsers
Common sizes at this ratio
Click a row to use it. Sizes that aren't whole pixels are rounded.
WidthHeight
Resize an image to these sizes
More free tools
See all 89 tools
How it works
  1. Type a width and a height, or tap a common ratio like 16:9. With the lock on, changing one side works out the other for you.
  2. Pick a place, like a YouTube player or an Instagram post, to see how your shape sits there: whether it fits, gets black bars, or gets cut off.
  3. Copy the CSS aspect-ratio, the Tailwind class, or the old padding-top trick, and paste it into your code or give it to your AI coding agent.
Questions
How do I work out an aspect ratio?
Divide the width and the height by the biggest number that goes into both. 1920 × 1080 → both divide by 120 → 16:9. This page does it as you type, and also shows the decimal form, like 1.778:1.
How do I find the height for a width at 16:9?
Height = width × 9 ÷ 16. So 1280px wide is 720px tall. Turn the lock on, type the width, and the height fills in.
What is the CSS for a fixed aspect ratio?
Use aspect-ratio: 16 / 9; on the element and give it a width. Every current browser supports it. In Tailwind, it is aspect-video for 16:9, aspect-square for 1:1, and aspect-[4/3] for anything else.
What is the padding-top hack?
Before aspect-ratio existed, people set padding-top to height ÷ width as a percentage (56.25% for 16:9) on a wrapper and placed the content inside it. You only need it today for HTML emails or very old browsers.
What size should a link preview image be?
1200 × 630 px, which is about 1.91:1. Facebook, LinkedIn, Slack and X all crop to roughly that shape, so keep text away from the edges.
Is anything uploaded?
No. Everything runs in your browser.