Aspect Ratio Calculator
Calculate missing width, height, and pixel dimensions for images, video streams, and responsive web layouts using standard aspect ratios (16:9, 4:3, 1:1, 9:16, 21:9).
Ready to use Aspect Ratio Calculator?
Runs instantly in your browser sandbox. No sign-up required.
Lock ratio and calculate missing height or width in real-time.
One-click presets for 16:9 widescreen, 1:1 square, 4:3 SD, and 9:16 vertical video.
Copy modern aspect-ratio CSS properties directly into your codebase.
Understanding Aspect Ratio Calculations
An aspect ratio represents the proportional relationship between a rectangle's width and height. Maintaining correct aspect ratios prevents stretched images, distorted video streams, and unwanted letterboxing.
Common Aspect Ratio Presets
- 16:9 Widescreen: 1920x1080, 1280x720, 384x216 (YouTube, HDTV, monitors)
- 4:3 Standard: 1024x768, 800x600, 640x480 (Legacy video, iPad displays)
- 1:1 Square: 1080x1080, 500x500 (Instagram posts, profile avatars)
- 9:16 Vertical: 1080x1920 (Mobile stories, TikTok, YouTube Shorts)
- 21:9 Ultrawide: 2560x1080, 3440x1440 Cinematic widescreen hero images
Formula for Calculating Proportional Dimensions
To calculate missing dimensions manually:
Target Height = Target Width * (Ratio Height / Ratio Width)
Target Width = Target Height * (Ratio Width / Ratio Height)CSS Implementation
Apply modern CSS properties to keep media containers proportional across screen sizes:
.responsive-media {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Frequently Asked Questions
How do I calculate missing height from a known width and aspect ratio?
Multiply the target width by the height ratio divided by the width ratio. For example, for a 16:9 ratio with an 800px width: 800 * (9 / 16) = 450px height.
What is the standard aspect ratio for desktop and mobile video?
Standard widescreen desktop video uses 16:9 (1920x1080). Mobile vertical video (Reels, TikTok, Shorts) uses 9:16 (1080x1920).
How does specifying aspect-ratio in CSS improve Web Vitals (CLS)?
Specifying aspect-ratio allows the browser to reserve exact layout bounding boxes before image or video bytes finish downloading, preventing abrupt vertical layout jumps (Cumulative Layout Shift).