Aspect Ratio Calculator
Calculate and visualize aspect ratios for any dimensions.
aspect-ratio: 16 / 9;
How to Use the Aspect Ratio Calculator
Enter any width and height to instantly see the simplified aspect ratio. Use the common presets for quick access to popular ratios like 16:9, 4:3 and 1:1. Lock the ratio to keep proportions when changing one dimension — the other adjusts automatically. Copy the generated aspect-ratio CSS property for use in your stylesheets.
Frequently Asked Questions
What is an aspect ratio?
An aspect ratio describes the proportional relationship between width and height. For example, 16:9 means the width is 16 units for every 9 units of height. It is commonly used in screens, photography and video.
How is the ratio simplified?
The calculator divides both width and height by their greatest common divisor (GCD). For example, 1920 and 1080 share a GCD of 120, giving 16:9.
What does the CSS aspect-ratio property do?
The CSS aspect-ratio property sets a preferred aspect ratio for a box. The browser adjusts the element's height (or width) automatically to maintain the ratio, which is useful for responsive layouts and media containers.
What is the lock ratio feature?
When the ratio is locked, changing the width automatically recalculates the height to keep the same proportions, and vice versa. This is helpful when resizing images or videos while preserving their shape.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →