The Aspect Ratio Calculator helps designers and developers work with aspect ratios for responsive layouts, images, videos, and UI components. Enter any width and height to calculate the ratio, or specify a ratio and one dimension to find the missing value. Compare common ratios and generate CSS for responsive containers.
Step-by-Step
Enter dimensions — Type a width and height (e.g., 1920 × 1080) to calculate the simplified aspect ratio (16:9).
Or enter a ratio — Specify an aspect ratio (e.g., 16:9) and one dimension to calculate the matching width or height.
Browse common ratios — Click preset buttons for standard ratios: 16:9, 4:3, 1:1, 21:9, 3:2, and more.
Compare visually — See a visual comparison of different aspect ratios overlaid on each other to understand the differences.
Copy CSS — Generate and copy the CSS aspect-ratio property or the classic padding-bottom percentage hack for older browsers.
Features
Ratio Simplification — Automatically reduces dimensions to the simplest ratio form (e.g., 1920×1080 → 16:9, 2560×1440 → 16:9).
Dimension Calculator — Enter a ratio and one known dimension to calculate the other. Find the height for a 16:9 container that's 800px wide.
Common Ratio Presets — Quick buttons for standard ratios used in video (16:9, 4:3, 21:9), photography (3:2, 4:5), social media (1:1, 9:16), and print (A4, letter).
Visual Comparison — See multiple aspect ratios drawn as overlapping rectangles so you can compare their proportions at a glance.
CSS Code Generation — Generates modern aspect-ratio: 16/9 CSS property and the legacy padding-bottom: 56.25% technique for full browser support.
Responsive Preview — See how your aspect ratio behaves at different container widths for responsive design testing.
Common Use Cases
Video Embeds — Calculate the correct container dimensions for embedding YouTube, Vimeo, or custom video players at 16:9 or other aspect ratios.
Image Cropping — Determine target dimensions when cropping images to a specific aspect ratio for thumbnails, hero images, or social media posts.
Responsive Containers — Generate CSS for responsive containers that maintain their aspect ratio at any viewport width.
UI Design — Ensure cards, thumbnails, and grid items maintain consistent proportions across different screen sizes.
Print Design — Calculate dimensions for print media with standard paper aspect ratios (A4, US Letter) and bleed areas.
Why Use This Tool
Aspect ratios are fundamental to visual design, but mental math with ratios is error-prone — especially when converting between dimensions and ratios or comparing unfamiliar proportions. This calculator handles all the arithmetic instantly and provides both modern CSS and legacy fallback code. It's an essential tool for responsive web design, video production, and any work involving proportional dimensions.