Calculate aspect ratios: pixel dimensions to simplified ratio, scale to target size, generate CSS aspect-ratio property, and browse presets for video (16:9, 9:16), photo (4:3, 3:2, 1:1), and print.
Calculate from dimensions
Scale to target size
Presets
CSS snippet
How to Use Aspect Ratio Calculator in 3 Steps
Configure. Enter width and height in pixels. Pixlane computes and simplifies the ratio using GCD — 1920×1080 becomes 16:9, 3840×2160 also 16:9.
Process. Enter a target dimension to scale: set a new width and the tool computes height preserving ratio (for responsive images and CSS).
Export. Copy the CSS `aspect-ratio: 16/9` property or browse presets (social media, video, photography) and apply with one click.
Why Aspect Ratio Calculator on Pixlane
Aspect ratio keeps images from looking stretched or cropped. Pixlane's calculator does every common transformation: from two pixel dimensions, compute simplified ratio (e.g., 1920×1080 → 16:9); from one dimension and target ratio, compute the other (e.g., 1200 wide at 16:9 = 675 tall); from a ratio, generate CSS `aspect-ratio: 16/9`. Includes presets for video (16:9, 9:16, 21:9), photo (3:2, 4:3, 1:1), and print (A4, Letter).
GCD-Based Simplification — Uses Euclidean algorithm to reduce ratios to their simplest form: 1920:1080 → 16:9, 2560:1440 → 16:9, 640:480 → 4:3. Consistent output across resolutions.
CSS aspect-ratio — Generates modern CSS `aspect-ratio: 16/9;` property (supported in all browsers since 2021) — no padding-top hack needed. Responsive images/iframes with one CSS line.
Preset Library — Common ratios organized by use case: 16:9 HD, 9:16 vertical mobile, 21:9 ultrawide, 4:3 traditional photo, 1:1 Instagram, 3:4 TikTok, 2:3 portrait. One click loads each.
Crop Math — Given a source size and target ratio, computes the crop rectangle — width, height, offset — so you can trim an image to fit without distortion. Useful for preparing social-media assets.
Frequently Asked Questions
What is CSS aspect-ratio?
A CSS property introduced in 2021 that sets the ratio between an element's width and height. Write `aspect-ratio: 16/9` and the element automatically computes the missing dimension. Replaces the old padding-top percentage hack.
Why do some ratios look different on different screens?
The same ratio displays proportionally on any screen. But screens have their own aspect ratios (most monitors 16:9, phones 19.5:9+). A 16:9 video on a 19.5:9 phone leaves letterbox bars; a 9:16 TikTok on a 16:9 TV leaves side bars.
What's the best ratio for social media?
Instagram feed: 1:1 (square) or 4:5 (vertical). Stories/Reels/TikTok: 9:16. YouTube: 16:9 horizontal or 9:16 Shorts. LinkedIn: 1.91:1 (1200×627). Twitter: 16:9 or 2:1. See the preset library for all current defaults.
Is this tool free?
Yes. Aspect Ratio Calculator on Pixlane is completely free with no signup required.