Skip to main content

Aspect Ratio Calculator

What it does

The Aspect Ratio Calculator keeps two dimensions locked to a target proportion. Pick a preset (16:9, 4:5, 1:1, 9:16, A4, or any custom ratio), enter one side, the other follows. The tool also simplifies the entered ratio to its lowest terms — typing 1920:1080 normalises to 16:9 immediately, which is occasionally exactly the answer you needed.

Common situations

You’re producing creative for a campaign that needs to hit Instagram square, Stories, Reels, and a YouTube thumbnail from one source photograph. Each platform has a recommended pixel size; getting it wrong by a few pixels wastes resolution. The calculator collapses “what’s the height for 1080 wide at 9:16?” into a single read.

You’re sizing a hero image slot inside a CMS template and the design specifies “16:9 widescreen but the slot needs to be 800px wide on tablet”. You need the matching height — typing the width gets the answer, no calculator switching.

You’re auditing existing imagery from a photographer whose deliverables are inconsistent. Some shots come in at 4:3, some 3:2, some 16:9. Running the dimensions through the calculator returns the simplified ratio for each — which makes batch-categorising the assets practical rather than tedious.

You’re building a responsive video embed where the iframe needs to maintain its aspect ratio across all viewport widths. The calculator gives you the ratio to put into your CSS aspect-ratio property; modern CSS handles the rest natively.

You’re designing print collateral that needs to translate cleanly to digital. A4 portrait at 210×297mm has a non-obvious aspect ratio (1:1.41) — running it through here returns the simplified form so you can match digital previews to the printed proportions.

What you need to know

An aspect ratio is the simplified relationship between width and height. 1920 by 1080 simplifies to 16:9 because the greatest common divisor of 1920 and 1080 is 120, and dividing both by 120 gives 16 and 9. The calculator runs that calculation continuously — every change to ratio inputs triggers a fresh simplification, every change to a dimension recomputes the partner using the active ratio.

Aspect ratio says nothing about resolution. A 1:1 ratio is square at 100×100, at 1000×1000, at 4000×4000. Picking the right ratio still leaves you to pick the right size; “1080×1080 for Instagram” combines the ratio (1:1) with a resolution recommendation (1080 pixels for retina-quality rendering at typical mobile sizes).

Modern CSS handles aspect ratio natively via the aspect-ratio property: aspect-ratio: 16 / 9 on any element makes the browser size it correctly without padding hacks or absolute-positioned wrappers. Browser support is universal in 2026 — every browser shipped after 2021 supports it. The old “padding-bottom: 56.25%” trick for responsive video embeds is now legacy code; replace it with the native property in any modern codebase.

Different platforms have settled on different ratios as their primary content shape. 16:9 dominates video (YouTube, TV, computer monitors). 9:16 dominates short-form vertical video (Stories, Reels, TikTok). 4:5 dominates social posts (Instagram portrait, LinkedIn carousels). 1:1 dominates legacy social (Instagram square, Twitter cards). 1.91:1 is the Open Graph and Facebook link-preview standard. Each ratio reflects where the content is consumed: phones favour vertical, desktops horizontal, social feeds in between.

For Open Graph specifically, 1200×630 is the conventional size — slightly wider than 16:9 (which would be 1200×675), reflecting Facebook’s historical preference for a wider aspect on link previews.

Frequently asked questions

What is an aspect ratio?

The simplified relationship between width and height. 16:9 means 16 units wide for every 9 units tall — common for video. 1:1 is square, 9:16 is vertical (Stories), 4:5 is portrait (Instagram).

What’s the most common aspect ratio?

16:9 for video and computer screens; 1:1 for legacy social posts; 9:16 for vertical mobile video. Each platform tends to standardise on one or two, and content is conventionally produced in those ratios.

How do I calculate aspect ratio from dimensions?

Find the greatest common divisor of width and height, then divide both. 1920÷120=16, 1080÷120=9, so 1920×1080 simplifies to 16:9. The calculator does this automatically; the underlying maths is the GCD algorithm.

What aspect ratio is best for Instagram?

Instagram supports 1:1 (square posts), 4:5 (portrait), 1.91:1 (landscape), and 9:16 (Stories and Reels). Portrait 4:5 occupies the most feed real estate — it is the highest-converting choice for organic posts.

What’s the difference between resolution and aspect ratio?

Resolution is the absolute pixel count (1920×1080). Aspect ratio is the proportion (16:9). Two images can share the same ratio at different resolutions — 1280×720 and 3840×2160 are both 16:9 but vastly different in detail.

Why does my image stretch when I change one dimension?

Without aspect-ratio locking, changing one side independently distorts the image. Modern image components and CSS aspect-ratio lock the proportions automatically; older code paths require manual calculation, which is what this tool exists for.

What aspect ratio should an Open Graph image be?

1200×630 — slightly wider than 16:9 (which would be 1200×675). The conventional size for Facebook, LinkedIn, and Twitter link previews. Smaller than 1200 reduces sharpness; larger wastes bandwidth.

Can I have a “negative” aspect ratio?

No — both dimensions must be positive. The relationship can be expressed in either direction (16:9 vs 9:16), but neither side can be zero or negative.

Common problems

Problem: The simplified ratio shows large numbers like 27:20 — that doesn’t look right.

The dimensions you entered have an unusually large GCD or genuinely don’t simplify to small integers. Real-world ratios usually simplify to small numbers (16:9, 4:3, 1:1). If yours doesn’t, the source dimensions probably have a rounding error — original was 1920×1080 but got resized to 1923×1080 somewhere, breaking the clean ratio.

Problem: A platform-specific dimension (e.g. 1080×1350 for Instagram portrait) does not match the calculator’s preset.

1080×1350 is 4:5, the calculator preset is “4:5 (Portrait)”. Both are correct. The platform spec is just a specific resolution at the same ratio. Check whether the simplified ratio matches; the resolution can vary as long as the ratio holds.

Problem: My responsive image stretches incorrectly across viewport sizes.

The image needs an aspect-ratio lock. Modern CSS: aspect-ratio: 16 / 9 on the image element. Older browsers: use the padding-bottom percentage hack with the value 100/(W/H)×H/W, e.g. 56.25% for 16:9. Modern browsers support the native property; only fall back to the old technique if you must support browsers from before 2021.

Problem: A video iframe maintains its width but not its height when the page resizes.

iframes don’t have intrinsic aspect ratios — they need an explicit one. Wrap the iframe in a div with aspect-ratio set, or apply aspect-ratio directly to the iframe in modern browsers. Without that, the iframe will use its width attribute and a fixed height that doesn’t scale.

Quick guides

Modern CSS: Use the aspect-ratio property directly. aspect-ratio: 16 / 9 on any block element fixes its proportions; the browser handles the maths. Combine with width: 100% for responsive containers.

Tailwind CSS: The aspect-{ratio} utilities map to common values — aspect-square (1:1), aspect-video (16:9). For arbitrary ratios, use the bracket form aspect-[4/5].

Image embedding (HTML): Set both width and height attributes on <img> tags so browsers reserve correct space before the image loads — this prevents layout shift. The values can be any numbers in the correct ratio; the actual rendered size still comes from CSS.

Tips

  • 16:9 dominates video. 4:5 dominates social posts. 1.91:1 (close to 16:9 but slightly wider) is the LinkedIn / Facebook preferred ratio for link previews.
  • For Open Graph images, 1200×630 is the conventional preset. Smaller works but loses sharpness; larger wastes bandwidth.
  • A4 aspect is roughly 1:1.41 — useful for designing print-aware PDFs even when the output is digital.
  • If a ratio simplifies to numbers larger than about 30:20, the source dimensions likely have an off-by-one rounding error.
  • Use modern CSS aspect-ratio rather than the padding-bottom hack — it is supported in every browser shipped after 2021.
  • Typing custom ratios like 5:4 or 11:8.5 (US Letter) into the ratio fields is supported — the calculator does not assume only presets.

Related tools in this suite

The natural pairing is the Image Resizer — calculate the ratio here, resize an image to match there. The Image Cropper also exposes the same preset ratios as crop guides, so you can move from “this is the target” to “this is what it looks like cropped” within the suite.

Take it further

Aspect-ratio guidelines are part of the larger conversation about content formats — what shapes you produce, why, and at what cadence. The Knowledge Center covers the strategic version of this question (which formats to invest in, which platform-specific dimensions to commit to). The calculator answers “what dimensions”; the bigger question is “for which platforms, in what proportion of the work”.