Aspect Ratio Calculator — Free Online Ratio Calculator
Maintaining the correct aspect ratio is critical for responsive web design, video production, photography cropping, and UI layout. Our free Aspect Ratio Calculator computes the simplified ratio from any dimensions, and lets you calculate missing width or height when scaling while preserving the ratio — all instantly in your browser.
What Is Aspect Ratio?
An aspect ratio is the proportional relationship between an element’s width and height, expressed as width:height. It defines the shape of a rectangle — whether it’s wide, square, or tall:
16:9— Standard widescreen (HD video, YouTube, most monitors)4:3— Traditional TV and older monitors1:1— Square (Instagram, profile photos)21:9— UltraWide cinema9:16— Vertical/portrait video (TikTok, Instagram Reels)3:2— 35mm film, most DSLR sensors
How to Use the Aspect Ratio Calculator
Calculate Ratio from Dimensions
- Enter your width in the Width field
- Enter your height in the Height field
- Click Calculate — the simplified ratio and decimal value appear instantly
Scale to New Dimensions
After calculating the ratio:
- In the “Calculate from Ratio” section, enter a target width — the tool calculates the correct height
- Or enter a target height — the tool calculates the correct width
This ensures your scaled image or container maintains the original proportions without distortion.
Use Presets
Click any preset button (16:9, 4:3, 1:1, etc.) to apply a common ratio directly and start calculating target dimensions.
Reverse
Click Reverse to swap width and height — useful for switching between landscape and portrait orientations.
Common Aspect Ratios Reference
| Ratio | Decimal | Common Use |
|---|---|---|
| 1:1 | 1.0000 | Square — Instagram posts, profile avatars |
| 4:3 | 1.3333 | Traditional TV, iPad, older monitors |
| 3:2 | 1.5000 | 35mm film, Canon/Nikon DSLRs, prints (4×6, 5×7.5) |
| 16:9 | 1.7778 | HD video, YouTube, most laptops and monitors |
| 16:10 | 1.6000 | MacBook screens, older widescreen monitors |
| 21:9 | 2.3333 | UltraWide monitors, cinema |
| 2:1 | 2.0000 | Dual wide — panoramic shots |
| 5:4 | 1.2500 | Medium format photography, some older prints |
| 9:16 | 0.5625 | Vertical video — TikTok, Stories, Reels |
| 2:3 | 0.6667 | Portrait orientation — Pinterest, posters |
Scaling Examples
Example 1: Scale a 16:9 image from 1920×1080 to width=1280
- Ratio: 16:9
- Target width: 1,280
- Calculated height: 1,280 ÷ (16/9) = 720
- Result: 1280×720 ✓ (standard 720p HD)
Example 2: Scale a 4:3 image to height=768
- Ratio: 4:3
- Target height: 768
- Calculated width: 768 × (4/3) = 1024
- Result: 1024×768 ✓ (classic XGA resolution)
Example 3: Find the ratio of a 2560×1440 monitor
- GCD of 2560 and 1440 = 160
- 2560/160 : 1440/160 = 16:9 ✓ (QHD/2K)
Why Aspect Ratio Matters
Web Design — Responsive Images
CSS’s aspect-ratio property (modern browsers) prevents layout shift when images load:
img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
Before aspect-ratio was available, the “padding-bottom hack” was used to maintain ratio:
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
height: 0;
}
Video Production
Encoding video at the wrong aspect ratio causes pillarboxing (black bars on the left/right) or letterboxing (bars on top/bottom). Matching source and export ratios prevents this.
Photography and Printing
Standard print sizes have fixed ratios:
- 4×6 inches = 3:2 ratio
- 5×7 inches = 5:7 ratio
- 8×10 inches = 4:5 ratio
- 11×14 inches = 11:14 ratio
Cropping to the wrong ratio before printing causes the lab to auto-crop parts of your image unexpectedly.
UI/UX Design
Component thumbnails, card images, hero banners, and video embeds all benefit from locked aspect ratios to ensure consistent layouts across different content and screen sizes.
Frequently Asked Questions
How is the simplified ratio calculated?
The calculator finds the Greatest Common Divisor (GCD) of the width and height using Euclid’s algorithm, then divides both values by it. For 1920×1080: GCD(1920, 1080) = 120, giving 1920/120 : 1080/120 = 16:9.
What does the decimal value represent?
The decimal is simply width ÷ height. A 16:9 ratio = 1.7778. A 4:3 ratio = 1.3333. Decimal comparisons are useful for quickly sorting or comparing ratios programmatically.
How do I maintain aspect ratio in CSS?
Use the modern aspect-ratio property: aspect-ratio: 16 / 9;. This locks the element’s proportions as its width changes. Combine with object-fit: cover for images to fill the container without distortion.
My ratio doesn’t simplify to a “nice” number — is that normal?
Yes. Not all dimensions produce clean ratios. A phone screen of 393×852 pixels gives a ratio of ~131:284 because 393 and 852 don’t share a large common factor. Common video and photo sensors are designed to produce clean ratios like 4:3 or 16:9.
What is the difference between aspect ratio and resolution?
Aspect ratio is the shape (proportional width to height). Resolution is the actual pixel count. 1920×1080, 1280×720, and 640×360 all have the same 16:9 aspect ratio but different resolutions.
Can I use this for widescreen versus standard video cropping?
Yes. Enter your source dimensions to find the ratio, then use the “Calculate from Ratio” section with target dimensions to find what needs cropping for a specific output format.
