How to Calculate Aspect Ratio for Images and Video
Aspect ratio is the proportional relationship between width and height. A 1920×1080 image has a 16:9 aspect ratio. Understanding and calculating aspect ratios is essential for responsive images, video embeds, CSS aspect-ratio property usage, and ensuring content displays correctly across devices.
- Calculate the aspect ratio of any dimensions.
- Covers calculating aspect ratio.
- Covers common aspect ratios.
- Covers css aspect-ratio property.
- Covers aspect ratios for responsive images.
Calculating Aspect Ratio
To find the aspect ratio of any dimensions, divide both width and height by their greatest common divisor (GCD). For 1920×1080: GCD is 120, so 1920/120 = 16 and 1080/120 = 9. The ratio is 16:9. For 1200×630 (common OG image): GCD is 30, ratio is 40:21. The Aspect Ratio Calculator does this instantly — enter any dimensions and get the simplified ratio plus equivalent sizes at common widths.
Common Aspect Ratios
16:9 — HD video, YouTube, desktop monitors. 4:3 — traditional TV, iPad, presentations. 1:1 — Instagram posts, profile pictures. 9:16 — vertical video (TikTok, Stories, Reels). 21:9 — ultrawide monitors, cinema. 4:5 — Instagram portrait posts. 3:2 — DSLR photos, MacBook screens.
gap instead of margin hacks for flexbox spacing. It keeps layout code cleaner and is supported in all modern browsers.CSS aspect-ratio Property
CSS has a native aspect-ratio property:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps..video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
This replaces the old padding-bottom hack for responsive embeds. The element maintains 16:9 proportions at any width. Supported in all modern browsers since 2021.
Aspect Ratios for Responsive Images
Set width and height attributes on tags to reserve space before the image loads (prevents layout shift):
tells the browser the aspect ratio before download. Combined with CSS width: 100%; height: auto, the image scales responsively while the browser reserves the correct space from the start.
Frequently Asked Questions
How do I calculate aspect ratio?
What aspect ratio is 1920x1080?
What is the CSS aspect-ratio property?
Use the Aspect Ratio Calculator — free, no signup required.
⚡ Open Aspect Ratio Calculator