Aspect Ratio Calculator

Aspect Ratio

Dimensions (px)

Width

Height

Simplified ratio

16:9

Decimal ratio

1.777778

Padding-bottom %

56.2500%

Megapixels

2.07 MP

Preview

1920 × 1080

16:9 · 1920×1080px

Common sizes at 16:9

Common Aspect Ratios

CSS Snippet

.container {
  width: 1920px;
  aspect-ratio: 16 / 9;
  /* padding-bottom trick (legacy): */
  /* padding-bottom: 56.2500%; */
}

How to use

Enter a width:height ratio or pick a preset. Then type a width or height — the other dimension updates automatically to maintain the ratio. The lock button keeps the ratio fixed while you resize. Copy the CSS snippet for direct use in your project.

Why use this tool

Stop calculating aspect ratios by hand. Instantly find the correct height for any video, image, or container. The CSS snippet is ready to paste into your stylesheet for responsive designs.

FAQ

What is aspect ratio?: Aspect ratio is the proportional relationship between width and height, written as W:H (e.g. 16:9 for widescreen video).
What is the padding-bottom CSS trick?: Setting padding-bottom as a percentage of width is a legacy technique to maintain aspect ratio without CSS aspect-ratio. Modern browsers support 'aspect-ratio' natively.
Can I enter decimal ratios like 2.35:1?: Yes. The tool accepts decimal inputs for ratios like 2.35:1 (cinemascope) or 1.85:1 (widescreen cinema).

Aspect Ratio Calculator

Common Aspect Ratios

CSS Snippet

How to use / Why use this tool / FAQ

How to use

Why use this tool

FAQ

Related Tools