What is an aspect ratio?
An aspect ratio is the proportional relationship between width and height, written as width:height. A 1920 × 1080 video and a 1280 × 720 thumbnail look different in size but share the same 16:9 shape. Keeping the ratio when you resize is what stops photos, videos and embeds from looking stretched or squashed.
This calculator works in both directions. Enter any width and height to get the simplified ratio (using the greatest common divisor), its decimal value and the nearest standard ratio — useful for odd screen sizes like 1366 × 768, which is technically 683:384 but almost exactly 16:9. Then lock a ratio and type a new width or height to get the other side instantly.
For web layouts it also generates CSS: the modern aspect-ratio property, plus the legacy padding-top technique that older embed code still relies on. For WordPress thumbnails and crop settings, pair it with the WordPress Image Size Calculator.
How to use the Image Aspect Ratio Calculator
- Enter the original Width and Height in pixels to see the simplified ratio, decimal ratio and nearest common ratio.
- Click Lock this ratio below, or pick a preset such as 16:9, 4:5 or 1.91:1.
- Type a New width to calculate the height, or a New height to calculate the width. Choose how to round fractional pixels.
- Use the common sizes table to pick a standard resolution, and copy the CSS for responsive boxes and embeds.
Example: a responsive 16:9 video embed
Resizing 1920 × 1080 to 1280 wide gives 1280 × 720. To make an embed keep that shape at any width:
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
/* 9 ÷ 16 = 56.25% for the legacy technique */
.video-legacy { position: relative; height: 0; padding-top: 56.25%; }Common aspect ratios and where they are used
- 16:9 — HD and 4K video, YouTube, most monitors and TVs (1920 × 1080, 3840 × 2160).
- 9:16 — vertical video for Stories, Reels, Shorts and TikTok (1080 × 1920).
- 4:3 and 3:2 — photos from phones, tablets and DSLR cameras.
- 1:1 and 4:5 — square and portrait social posts (1080 × 1080, 1080 × 1350).
- 1.91:1 — Open Graph share images, typically 1200 × 630. See the Open Graph Generator.
- 21:9 — ultrawide monitors and cinematic video.
CSS aspect-ratio vs the padding-top hack
The aspect-ratio property is supported in all modern browsers and is the simplest way to reserve space for images, videos and iframes, which also prevents layout shift (CLS). Setting width and height attributes on <img> tags gives browsers the same information automatically.
Before aspect-ratio, developers used a zero-height box with padding-top as a percentage, because vertical padding is calculated from the element's width. The percentage is height ÷ width × 100 — 56.25% for 16:9. You will still see it in older themes and iframe embed code.
Frequently Asked Questions
How do I calculate an aspect ratio?
Divide the width and height by their greatest common divisor. For 1920 × 1080 the GCD is 120, so the ratio is 1920 ÷ 120 : 1080 ÷ 120 = 16:9. The decimal form is width ÷ height, here 1.7778:1.
How do I find the height for a new width?
Multiply the new width by the ratio height and divide by the ratio width. At 16:9, a 1280 px wide image needs 1280 × 9 ÷ 16 = 720 px of height.
Why is 1366 × 768 not exactly 16:9?
1366 ÷ 768 = 1.7786, while 16:9 = 1.7778. The panel width was rounded to an even number for manufacturing, so the true ratio is 683:384 — within 0.05% of 16:9, which is why it is sold as a 16:9 screen.
What size should an Open Graph image be?
Use 1200 × 630 pixels, a 1.91:1 ratio. Most platforms crop to roughly that shape, so keep important text away from the edges.
What happens when the result is not a whole number of pixels?
Images must have whole-pixel dimensions, so the calculator rounds using the method you choose and shows the exact value next to it. Rounding changes the ratio by a fraction of a pixel, which is invisible in practice.