Aspect Ratio Calculator
Calculate and visualize aspect ratios for any dimensions.
Reviewed by Aygul Dovletova · Last reviewed
aspect-ratio: 16 / 9;
Using the Aspect Ratio Calculator
- Enter a width and height in the pixel fields. The simplified ratio appears immediately next to the inputs - for example 1920 x 1080 reduces to 16:9.
- Pick a preset from the common-ratio buttons (16:9, 4:3, 21:9, 1:1, 9:16) to fill both inputs with a known ratio at a sensible pixel size.
- Toggle the lock to keep the ratio fixed while you adjust either dimension. Changing the width auto-recalculates the height, and vice versa.
- Copy the CSS snippet shown below the ratio:
aspect-ratio: 16 / 9;, ready to paste into a stylesheet or a Tailwind arbitrary value like[aspect-ratio:16/9]. - Scale up or down by multiplying both inputs by the same factor; the ratio stays 16:9 no matter whether the resolution is 1280 x 720 or 7680 x 4320.
What the Simplification Does
Given a width w and height h, the simplified ratio is w / g : h / g where g = GCD(w, h). The GCD is computed with Euclid's algorithm, the same routine powering the dedicated GCD calculator on this site; it runs in O(log min(w, h)) divisions and is effectively instant for any pair of pixel dimensions. For 1920 and 1080, the GCD is 120 and the ratio reduces to 16:9.
The tool also emits the CSS aspect-ratio property value, specified in CSS Sizing Level 4 and supported in every modern browser since Chrome 88, Firefox 89, and Safari 15.4. The property takes either a single <ratio> (16 / 9) or the keyword auto, and it reserves layout space to prevent cumulative layout shift (CLS) while an image or iframe loads. Everything is computed in the Preact component - no network call, no persistence.
When a Ratio Calculator Saves Time
- Picking a thumbnail size that matches a YouTube video at 16:9 without distortion.
- Designing a responsive hero image container where the aspect ratio must be locked across viewport widths.
- Rescaling a logo for a vertical story format (9:16) without cropping or squishing.
- Checking whether a cinema trailer (2.39:1) will fit letterboxed into a 16:9 TV frame.
- Normalising image tile sizes for a photo grid where all tiles must share a ratio.
- Converting between a camera sensor ratio (3:2) and a print ratio (5:7 or 8:10) before ordering.
Pitfalls and Precision Notes
- Rounded pixel dimensions lose exact ratios. 854 x 480 is a common 480p size but the real ratio is 16.025:9; the GCD reduction gives 427:240, not 16:9. Lock the ratio first, then pick a width divisible by 16 to get clean integers.
- Decimal inputs are rejected. The simplification assumes integer pixel dimensions; a decimal input indicates you are probably working in a different unit.
- CSS
aspect-ratiois not a hard constraint. If the contents of the element require more space (for example a long text string), the element will still grow, and the ratio becomes a preferred aspect rather than an enforced one. - Images scaled to fit inside an aspect-ratio box still need
object-fit: coverorcontain; the aspect ratio property alone does not prevent letterboxing or cropping. - 9:16 vs. 16:9 matters. Portrait video for TikTok and Reels is 9:16 (width:height); landscape video for YouTube is 16:9. The preset buttons make this explicit to avoid swaps.
- Very old browsers (pre-2021 Safari, pre-2021 Edge Legacy) lack native support and fall back to the padding-bottom hack; the generated CSS snippet is designed for modern browsers.
How Ratios Became Standard
The 4:3 ratio comes from Thomas Edison's 1892 35mm film frame (1.33:1) and persisted into early television (NTSC at 4:3). The 16:9 HDTV ratio, standardised by SMPTE in the 1980s as a compromise between 4:3 TV and wider cinema formats, is the geometric mean of 4:3 and 2.35:1 and was chosen to look good displaying content from either. Cinema formats include 2.39:1 (anamorphic Scope), 1.85:1 (standard flat), and IMAX at roughly 1.43:1. Mobile phone displays moved to 19.5:9 and 20:9 around 2017 to fit more in a narrower hand-held frame. The CSS aspect-ratio property entered the W3C CSS Sizing Module Level 4 draft in 2019 and became baseline-supported by 2022. ISO 23091-2 defines aspect ratios for video codecs.
Browser Tool vs. Design Apps
Photoshop, Figma, Sketch, and Affinity Designer all have crop tools that enforce a ratio interactively; Final Cut, Premiere, and DaVinci Resolve do the same for video. For responsive web design, modern CSS aspect-ratio with a calculator like this one is simpler than the old padding-bottom hack (which used padding-top: 56.25% to emulate 16:9). Tailwind CSS ships an aspect-ratio plugin, but the arbitrary-value syntax [aspect-ratio:16/9] works without it. The browser tool wins for quick lookup and CSS snippet generation; a design app wins when the ratio must be applied to an actual image or video with cropping and rendering.
Frequently Asked Questions
How does the GCD simplify the ratio?
The calculator computes GCD(width, height) with Euclid's algorithm and divides both numbers by that GCD. For 1920 x 1080 the GCD is 120, and 1920/120 : 1080/120 = 16:9. Reducing by the GCD always produces the canonical lowest-terms form; any other common factor between width and height would leave a reducible ratio like 32:18.
What does the CSS aspect-ratio property actually do?
It reserves a preferred box shape for an element so the browser can lay out surrounding content before the element's intrinsic size is known. This eliminates the layout shift that previously plagued image-heavy pages. Specified in CSS Sizing Level 4, it has been supported in Chrome 88, Firefox 89, Safari 15.4, and Edge 88 and is now baseline Widely Available. The property takes a ratio like <code>16 / 9</code> or the keyword <code>auto</code>.
Do my width and height values get uploaded?
No. The calculator runs entirely inside your browser tab. There is no server call to compute the GCD, no analytics beacon carrying the inputs, and no storage persisting the result. The Copy CSS button writes to the clipboard API, which is a local browser function.
Why does 854 x 480 not reduce to 16:9?
854 / 480 = 1.7791..., whereas 16 / 9 = 1.7777... exactly. The two are close but not equal, so the GCD-based reduction gives a different lowest-terms ratio. 854 x 480 is a common "480p" encoding size that deliberately rounds to a multiple of 16 for codec alignment, sacrificing the exact 16:9 ratio. For genuine 16:9 at 480-pixel height use 853.33, or round to 848 x 480 or 864 x 486.
What is the difference between object-fit and aspect-ratio?
<code>aspect-ratio</code> sets the shape of the container. <code>object-fit</code> controls how an image or video inside that container is scaled to fit: <code>cover</code> fills the box and crops excess, <code>contain</code> shows the whole image and letterboxes empty space, <code>fill</code> stretches (usually ugly). The two work together: the container reserves space with the ratio, and object-fit decides how the media is placed inside.
Does the aspect-ratio property work on background images?
Yes, in the sense that the property sizes the element; the background image is then placed by its own <code>background-size</code> property. For <code>background-size: cover</code>, the background fills the aspect-ratio-reserved area exactly. For <code>background-size: contain</code>, the image is fit inside with letterboxing. The property does not change how backgrounds are positioned, only the container shape.
What about the padding-bottom hack that came before?
Before native <code>aspect-ratio</code>, responsive container shapes were faked with <code>padding-top: 56.25%</code> (for 16:9) on a wrapper, because percentage padding is computed against the containing width. The hack is still backward-compatible with very old browsers but cannot be combined with explicit height and requires a wrapping element. Modern CSS <code>aspect-ratio</code> is cleaner and supported everywhere; use the hack only if you must target browsers older than 2021.
Why is 21:9 sometimes shown as 43:18?
True cinematic ultrawide is 2.370:1, which reduces exactly to 21:9 only if the source is chosen that way. A common monitor resolution is 2560 x 1080; 2560/1080 = 2.370..., and the GCD reduction gives 64:27, not 21:9 exactly. Manufacturers market the ratio as "21:9" because 64:27 is not a recognisable number; either label is defensible. The tool reports whatever the GCD reduction actually yields.
Can I paste a non-integer like 16.2?
Not in the current UI, which expects integer pixel counts. If your source is a scaled CSS unit (em, rem, vw) or a video measurement in real-world units, compute the integer pixel equivalent first. For true non-integer ratios, write them directly into the CSS: <code>aspect-ratio: 2.39 / 1;</code> is legal syntax.
What are common video editing ratios?
Old TV was 4:3 (1.333:1). HD and most streaming is 16:9 (1.778:1). Flat cinema is typically 1.85:1. Anamorphic Scope is 2.39:1. IMAX is about 1.43:1. Mobile vertical content is 9:16. Square (Instagram grid) is 1:1. Stories and Reels are 9:16. Each has its own preset in the tool, so you can jump to a standard ratio and scale from there.
More CSS & Design
Blob Shape Generator
Generate organic blob shapes as SVG.
Open toolBorder Radius Generator
Create CSS border-radius with a visual corner editor.
Open toolCSS Box Shadow Generator
Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.
Open toolColor Palette Generator
Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).
Open toolColor Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open toolCSS Animation Generator
Create CSS keyframe animations with presets and visual preview. Doubles as an animate-CSS generator and keyframe maker.
Open tool