Aspect Ratio Calculator & Scaler
The problem: Every time you need a 16:9 crop of a non-standard size, or want to know what ratio a design spec implies, you end up doing long division on a calculator.
ASG Privacy VerifiedVerified
100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.
Aspect Ratio Calculator & Scaler: the complete guide
An aspect ratio calculator scales one image or video dimension to maintain a given ratio, detects the ratio of existing dimensions, and converts ratios to CSS Tailwind utility classes and pixel values. Aspect ratios define the proportional relationship between width and height — 16:9 means for every 16 pixels of width there are 9 of height — and maintaining them during resizing prevents distortion. The tool handles both directions: scale by target width (find the matching height) or scale by target height (find the matching width), with detection of the simplified ratio from any pair of pixel dimensions.
Common aspect ratios and their uses
16:9 is the dominant widescreen video format — YouTube, Vimeo, most HD and 4K monitors, and almost all video embeds use it. 4:3 is the classic TV ratio and still the default for iPad cameras and many document scanners. 1:1 is the square format popularized by Instagram and used for product images, profile photos, and thumbnails that need to look identical in grid and featured views. 9:16 is the vertical video ratio for Stories, Reels and TikTok — the phone screen flipped on its side. 3:2 is the DSLR and 35mm film standard, used by most mirrorless cameras and stock photo libraries. 21:9 is the ultrawide cinema format, used in film exports and ultrawide monitor wallpapers.
CSS aspect-ratio property and Tailwind classes
CSS gained a native aspect-ratio property in 2021, supported by all modern browsers. aspect-ratio: 16 / 9 makes an element maintain its proportions as width changes — essential for responsive video embeds that previously required the padding-top hack. Tailwind CSS 3 adds the aspect-[n/m] arbitrary value class, so aspect-[16/9] applies the ratio directly in HTML. The scaler outputs the Tailwind class for any ratio, making it a quick lookup tool: 'I need the Tailwind class for a 4:5 Instagram portrait image — what is it?' (answer: aspect-[4/5]).
Step by step: how to use Aspect Ratio
- 1
Choose your mode: Scale by Width, Scale by Height, or Detect Ratio.
- 2
Enter your aspect ratio (e.g., 16:9) or pick one of the common ratio presets.
- 3
Enter the target width or height you know.
- 4
The missing dimension is calculated instantly and shown in the result cards.
- 5
Copy the pixel dimensions, CSS rule, or Tailwind class with the corresponding Copy buttons.
- 6
Use the visual preview to confirm the proportions look right before copying.
Security & privacy
Aspect ratio math is pure arithmetic with no server involvement. Nothing about your image dimensions, project requirements or target resolutions leaves your browser.