Aspect Ratio Calculator
How to Use
Enter width and height to calculate the aspect ratio. Use the presets to quickly fill in common ratios like 16:9 or 4:3. The resize calculator lets you find new dimensions that maintain the same proportions.
Aspect Ratios Explained
An aspect ratio describes the proportional relationship between width and height. 16:9 is the standard for HD/4K video and most monitors. 4:3 was the classic TV and early computer standard. 21:9 is used for ultrawide displays and cinema. 1:1 is square, common in social media. 9:16 is vertical video for mobile platforms like TikTok and Instagram Reels.
Use Cases
- Responsive web design: determine ratios for the CSS aspect-ratio property and prevent layout shifts
- Video editing: calculate crop dimensions when converting footage to 16:9 or 9:16
- Image cropping: find optimal dimensions that maintain proportions when resizing for social media
- Social media sizing: check recommended ratios for Instagram (1:1, 4:5), YouTube (16:9), X/Twitter headers (3:1), and more
- Print design: calculate image ratios for paper sizes like A4 (approximately 1:1.414) or B5
The CSS aspect-ratio Property
The CSS aspect-ratio property lets you define the preferred width-to-height ratio of an element. For example, 'aspect-ratio: 16 / 9;' automatically calculates the height based on width. It replaces the legacy padding-top hack (padding-top: 56.25%) for responsive video embeds and card layouts. You can copy the ratio calculated by this tool and apply it directly in your CSS.
Privacy
All calculations happen entirely in your browser. No data is sent to a server, stored, or logged.
FAQ
What is the difference between aspect ratio and resolution?
Aspect ratio is the proportional relationship of width to height (e.g., 16:9), while resolution is the actual pixel size (e.g., 1920×1080). The same 16:9 ratio can have many resolutions like 1280×720 or 3840×2160; this tool derives the ratio from dimensions and also resizes while keeping the ratio.
Are the dimensions I enter sent to a server?
No. Both the ratio calculation and the resize calculator run entirely in your browser, and your input values are never sent, stored, or logged.
Can it handle odd, non-standard ratios?
Yes. You can enter any positive numbers, and the ratio is shown both as a simplified integer ratio (reduced by the greatest common divisor) and as a decimal value.
Can I use the calculated ratio directly in CSS?
Yes. The tool outputs a value formatted for the CSS aspect-ratio property (e.g., 16 / 9), so you can copy and paste it straight into your stylesheet.
How does the resize calculator work?
After entering the source dimensions, type either a new width or a new height, and the tool automatically computes the other value to preserve the original aspect ratio.