About

Miscalculating aspect ratios in CSS leads to stretched images, broken layouts, and content reflow that degrades Cumulative Layout Shift (CLS) scores. The aspect-ratio property and the legacy padding-bottom percentage technique both require a precise ratio derived from pixel dimensions. This tool computes the simplified ratio using the Euclidean GCD algorithm, outputs the decimal multiplier, generates the padding-bottom percentage for legacy browser support, and produces copy-ready CSS declarations. It also solves the inverse problem: given a target ratio and one known dimension, it calculates the missing dimension. Results assume rectangular geometry with no sub-pixel rounding applied.

Formulas

The simplified aspect ratio is found by dividing both dimensions by their Greatest Common Divisor (GCD). The GCD is computed recursively via the Euclidean algorithm:

gcd(a, b) =

{

a if b = 0gcd(b, a mod b) otherwise

The simplified ratio components become:

R_w = Wgcd(W, H) , R_h = Hgcd(W, H)

The CSS padding-bottom percentage for the legacy responsive box technique is:

P = HW × 100%

For dimension scaling, given a target ratio R = R_w:R_h and a known width W:

H = W × R_hR_w

Where W = width in pixels, H = height in pixels, R_w = ratio width component, R_h = ratio height component, P = padding-bottom percentage.

Reference Data

Name	Ratio	Decimal	Padding-Bottom	Common Use
Square	1:1	1.0000	100%	Social media avatars, thumbnails
Classic Photo	3:2	1.5000	66.667%	DSLR photos, 35mm film
Standard TV	4:3	1.3333	75%	Legacy monitors, iPad display
Photo Print	5:4	1.2500	80%	8×10 prints, medium format
European Widescreen	5:3	1.6667	60%	Some phone screens
Widescreen HD	16:9	1.7778	56.25%	YouTube, monitors, HDTV
Tall Widescreen	16:10	1.6000	62.5%	MacBook displays, WUXGA
Phone Portrait	9:16	0.5625	177.778%	Stories, Reels, TikTok
Ultrawide	21:9	2.3333	42.857%	Ultrawide monitors, cinema
Super Ultrawide	32:9	3.5556	28.125%	Samsung super ultrawide
Cinemascope	2.35:1	2.3500	42.553%	Anamorphic cinema
IMAX	1.43:1	1.4300	69.93%	IMAX film format
Univisium	2:1	2.0000	50%	Modern phones (18:9), Netflix
Golden Ratio	1.618:1	1.6180	61.804%	Design compositions
DCI 2K	256:135	1.8963	52.734%	Digital cinema projection
A4 Paper	1:√2	0.7071	141.421%	ISO 216 paper (A-series)
Instagram Landscape	1.91:1	1.9100	52.356%	Instagram landscape posts
Instagram Portrait	4:5	0.8000	125%	Instagram portrait posts
Twitter Card	2:1	2.0000	50%	Twitter/X summary card images
OG Image	1.905:1	1.9050	52.493%	Open Graph (1200×630)

Frequently Asked Questions

The CSS aspect-ratio property (supported since 2021 in all major browsers) directly declares the ratio on an element. The padding-bottom technique exploits the fact that percentage-based padding is calculated relative to the element's width. Setting padding-bottom to 56.25% on a zero-height container creates a 16:9 box. The legacy method requires an inner absolutely-positioned child to hold content. Use aspect-ratio for modern projects and the padding hack only if you must support Internet Explorer or older WebKit builds.

The tool uses the Euclidean GCD algorithm on integer values. If you enter 1920 and 1080, the GCD is 120, yielding 16:9. However, if dimensions contain decimals (e.g., 1920.5), the tool scales them to integers first, which may produce larger coprime numbers. Always use whole-pixel values for clean ratios.

Browsers round computed dimensions to device pixels. On a 1dpr screen, a 16:9 container at 355px wide should be 199.6875px tall. The browser rounds to 200px, introducing a 0.16% error. On high-DPI screens this is imperceptible. For pixel-perfect work (e.g., sprite sheets), choose dimensions that divide evenly by both ratio components.

Yes. The aspect-ratio property works as a preferred ratio. For replaced elements (<img>, <video>), it acts as a fallback before the intrinsic dimensions load. Combine it with width: 100% and height: auto so the browser reserves the correct space during loading, preventing Cumulative Layout Shift. The intrinsic ratio of the media overrides the CSS property once loaded unless you set both width and height explicitly.

Standard YouTube video is 16:9 (1920×1080). Use aspect-ratio: 16 / 9 or padding-bottom: 56.25%. If the video is a YouTube Short or vertical embed, use 9:16 (177.778%). Some older Vimeo content may be 4:3. Check the source dimensions before hardcoding.

The Golden Ratio (φ ≈ 1.618) is irrational and cannot be expressed as a ratio of two integers. CSS accepts decimal values: aspect-ratio: 1.618 / 1. The tool handles this by detecting non-integer inputs and presenting the decimal form directly rather than forcing an approximate integer ratio. For practical purposes, 89:55 (Fibonacci approximation) is within 0.03% accuracy.