Orveta

CSS Aspect Ratio Calculator

Developer
New

Get the simplified ratio, decimal value, and ready-to-use CSS.

Dimensions

Enter any width and height in pixels — or start from a common ratio.

Common ratios

Ratio & CSS

Modern aspect-ratio and the legacy padding-top fallback.

16 : 9

Simplified ratio

1.7778

Decimal ratio

56.25%

Padding-top

Modern (aspect-ratio)

.container {
  aspect-ratio: 16 / 9;
}

Legacy fallback (padding-top)

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.container > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

About this tool

Enter any width and height and get the simplified aspect ratio, its decimal value, the modern CSS aspect-ratio property, and the legacy padding-top percentage fallback for older browser support — all generated instantly.

How to use CSS Aspect Ratio Calculator

  1. 1

    Enter a width and height in pixels, or pick a common ratio preset.

  2. 2

    The simplified ratio, decimal ratio, and padding-top percentage are calculated instantly.

  3. 3

    Copy the modern aspect-ratio CSS, or the legacy padding-top fallback for wider browser support.

Frequently asked questions