Aspect Ratio Calculator: Resize Image & Video Dimensions
Calculate proportional width and height, simplify custom pixel resolutions into standard ratios (16:9, 4:3, 9:16, 21:9), preview dimensions live, and generate modern CSS snippets.
aspect-ratio: 16 / 9;
How to Calculate Aspect Ratios in 3 Steps
Select Ratio or Enter Resolution
Pick a standard preset (like 16:9 for YouTube or 9:16 for TikTok/Reels) or type your original photo/video pixel width and height.
Enter Target Width or Height
Type in your desired new width or height. The calculator instantly computes the missing dimension without stretching or distorting.
Preview & Export CSS
Check the live visual shape box to verify framing, copy the exact pixel dimensions, or grab the one-line CSS aspect-ratio code.
The Complete Guide to Aspect Ratios, Geometry & Screen Resolutions
An aspect ratio describes the proportional relationship between the width and height of an image, video stream, or display monitor. Regardless of physical size, keeping the aspect ratio constant prevents distortion, stretching, or letterboxing.
The Mathematics Behind Aspect Ratio Calculation
Aspect ratios are calculated using Euclidean mathematics to reduce two dimensions to their lowest irreducible fraction:
- Greatest Common Divisor (GCD): For a resolution of $3840 \times 2160$ (4K UHD), the GCD is 240. Dividing both dimensions by 240 produces the canonical ratio: $\frac{3840}{240} : \frac{2160}{240} = 16:9$.
- Proportional Scaling Formula: When resizing an asset while maintaining ratio:
New Height = (New Width × Original Height) / Original WidthNew Width = (New Height × Original Width) / Original Height - Decimal Aspect Factor: Dividing width by height produces the decimal multiplier (e.g. $16 / 9 = 1.777\dots$). Multiplying any height by 1.777 yields the matching width.
Display Aspect Ratio (DAR) vs Pixel Aspect Ratio (PAR)
In modern digital screens, pixels are strictly square ($\text{PAR} = 1:1$). However, in legacy broadcast television (such as NTSC and PAL DVD standards), non-square rectangular pixels were employed, meaning the Display Aspect Ratio (DAR) differed from the raw Storage Aspect Ratio (SAR). All calculations in this tool operate under the modern standard square-pixel assumption.
Letterboxing and Pillarboxing Explained
When displaying content on a screen with a different native aspect ratio:
- Letterboxing (Black Bars Top & Bottom): Occurs when widescreen cinema content (2.39:1 or 21:9) is displayed on standard 16:9 television screens.
- Pillarboxing (Black Bars Left & Right): Occurs when vintage 4:3 television content or vertical smartphone video (9:16) is played on a horizontal 16:9 monitor.
Standard Aspect Ratios & Resolution Matrix
Reference guide of standard aspect ratios, common resolutions, decimal factors, and real-world media formats:
| Ratio | Decimal | Common Resolutions | Primary Media / Platform Format |
|---|---|---|---|
| 16:9 | 1.78:1 | 1920×1080 (FHD), 2560×1440 (2K), 3840×2160 (4K) | YouTube, HDTV, PC monitors, streaming video |
| 9:16 | 0.56:1 | 1080×1920, 720×1280 | TikTok, Instagram Reels, YouTube Shorts, mobile stories |
| 4:3 | 1.33:1 | 1024×768, 1440×1080, 2048×1536 | iPad tablets, classic CRT television, retro gaming |
| 1:1 | 1.00:1 | 1080×1080, 2048×2048 | Square Instagram posts, profile avatars, CD covers |
| 4:5 | 0.80:1 | 1080×1350 | Instagram portrait feed posts (maximum feed screen area) |
| 21:9 | 2.33:1 | 2560×1080, 3440×1440, 5120×2160 | Ultrawide gaming monitors, theatrical anamorphic cinema |
| 2.39:1 | 2.39:1 | 1920×804, 3840×1606 | Modern Hollywood theatrical widescreen movie releases |
Frequently Asked Questions
Look up the image's pixel dimensions in your computer's file properties (e.g. 2400 × 1600). Enter 2400 into New Width and 1600 into New Height. Our tool calculates the greatest common divisor and displays the simplified ratio (in this case, 3:2).
For vertical video (TikTok, Instagram Reels, YouTube Shorts), use 9:16 (1080 × 1920). For Instagram grid photos, 4:5 (1080 × 1350) is optimal because it fills the maximum vertical screen space on mobile phones without being cropped.
In modern CSS, you can apply aspect-ratio: 16 / 9; directly to any video container, image, or card element. If you set width: 100%;, the browser automatically adjusts height to preserve the proportion, preventing Cumulative Layout Shift (CLS).
Yes. Digital image and video files require integer pixel counts. The calculator automatically rounds to the nearest whole pixel while displaying the precise decimal factor in the telemetry metrics strip.