Tool 07 — Layout

Aspect Ratio Calculator

Format library for screen, social media and print. Calculate missing pixel dimensions, find the crop or letterbox required to convert between ratios, and copy CSS output directly.

Deeper Dive
Aspect ratios in CSS: from 16:9 to container queries→

Aspect Ratio Calculator

▶ Pixel Calculator
Width px → Height 1080 px
Height px → Width 1920 px
▶ CSS
▶ Crop / Letterbox
Compare with

How aspect ratio works in CSS

The CSS aspect-ratio property (supported in all modern browsers since 2021) defines the preferred ratio of an element's width to height. Combined with width: 100%, it automatically adjusts the height to maintain the ratio as the layout changes — eliminating the need for the older percentage-padding hack. The property accepts a simple ratio (aspect-ratio: 16 / 9), a decimal (aspect-ratio: 1.777) or the keyword auto. This tool outputs the correct ratio syntax for any set of dimensions.

Common aspect ratios for screen and social media

16:9 is the standard widescreen ratio for video, presentations and desktop UI. 4:3 is the legacy TV and tablet ratio, still used for many video calls and presentation formats. 1:1 (square) is the default for Instagram posts and many social media profile images. 9:16 (portrait 16:9) is the TikTok and Instagram Reels format. 4:5 is the preferred portrait format for Instagram feed posts. Social platform requirements change frequently — always verify current specifications with the platform's help centre before final production.

Calculating pixel crops between aspect ratios

When you need to crop a 16:9 source image to 4:5 (for an Instagram post) or 1:1 (for a profile image), the safe area calculation tells you how much of the original image is lost at each side. This tool calculates the crop dimensions and shows which parts of the image are preserved at the target ratio — useful for framing photos where the subject must remain visible across multiple output formats.

Advertisement uicorn — free tools for designers and art directors uicorn — free tools for designers and art directors

Frequently asked questions

What aspect ratio should I use for YouTube thumbnails?
YouTube thumbnails should be 16:9 ratio, at a minimum of 1280×720 pixels. The recommended format is 1280×720px JPEG or PNG under 2 MB.
How do I maintain aspect ratio in CSS without JavaScript?
Use the CSS aspect-ratio property: aspect-ratio: 16 / 9; width: 100%;. The browser calculates the height automatically. For older browser support, the percentage-padding technique still works: set padding-top: 56.25% on a zero-height container (56.25% = 9/16 × 100).
What is the difference between 16:9 and 1920x1080?
16:9 is a ratio — the relationship between width and height. 1920×1080 is a specific pixel resolution at that ratio. 3840×2160 (4K), 1280×720 (HD) and 854×480 are all 16:9. The ratio describes the shape; the pixel count describes the resolution.
What aspect ratio is A4 paper?
A4 (210×297mm) has an aspect ratio of approximately 1:1.414, which is the square root of 2. This ratio is used across the entire ISO 216 paper series (A3, A4, A5 etc.) so that folding an A3 sheet in half produces two A4 sheets with the same proportions.
uicorn is and will always be free. Built by one person. Fuelled by coffee. Buy Lui a coffee

Related tools

Advertisement uicorn — free tools for designers and art directors uicorn — free tools for designers and art directors
Disclaimer — Tool 07 · Aspect Ratio Calculator
Social Media Formats
Platform-recommended pixel dimensions are based on publicly available guidelines and are subject to change. Always verify against the platform's current help documentation before production.
Crop Calculation
Crop and letterbox values are computed geometrically from the ratio. Actual crop position depends on the focal point of the image — the tool shows the maximum mathematical crop, not a smart crop.
CSS aspect-ratio
The CSS aspect-ratio property is supported in all modern browsers. The padding-top hack is provided for legacy compatibility with IE11 and older environments.
Print Ratios
Print format ratios are derived from ISO 216 and standard US paper sizes. They are provided as aspect ratio references only — use the Print Format Studio (Tool 05) for production-ready print templates with bleed and safe zones.
Liability
All outputs are provided without warranty of any kind, express or implied. uicorn and its operator accept no liability for any direct, indirect, or consequential loss or damage arising from the use of, or reliance on, this tool or its output. You are solely responsible for verifying all values before use in any professional, commercial, or production context.