CSS <ratio> Data Type

The CSS <ratio> data type represents a proportional relationship between two numeric values. It is commonly used to describe the width-to-height relationship of an element, such as 16 / 9, 4 / 3, or 1 / 1.

Syntax

A <ratio> consists of one or two <number> values. When two numbers are used, they are separated by a forward slash (/):

<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?

Examples include:

Ratio Values

When a ratio contains two numbers, the first number represents one dimension and the second represents the other. For an aspect ratio, these values describe the proportional relationship between width and height.

Ratio	Relationship
`1 / 1`	Equal width and height
`4 / 3`	Width is four units for every three units of height
`3 / 2`	Width is three units for every two units of height
`16 / 9`	Width is sixteen units for every nine units of height

Single Number

If only one number is specified, the second number is treated as 1. This means a single value such as 1.5 represents the same ratio as 1.5 / 1.

1
1.5
2

These values are equivalent to 1 / 1, 1.5 / 1, and 2 / 1, respectively.

Equivalent Ratios

Different pairs of numbers can represent the same proportional relationship. The browser compares the mathematical ratio rather than requiring a particular pair of values.

16 / 9
32 / 18
1.7777778 / 1

Each of these values represents approximately the same proportion.

Aspect Ratios

The <ratio> data type is commonly used by the aspect-ratio property to define the preferred proportional relationship between an element's width and height.

.square {
  aspect-ratio: 1 / 1;
}
.standard {
  aspect-ratio: 4 / 3;
}
.widescreen {
  aspect-ratio: 16 / 9;
}

The browser can use the specified ratio when calculating an automatic width or height.

<ratio> Example

The following example gives three elements the same width while using different <ratio> values to determine their heights:

.square {
  aspect-ratio: 1 / 1;
}
.standard {
  aspect-ratio: 4 / 3;
}
.widescreen {
  aspect-ratio: 16 / 9;
}

Browser Result

1 / 1

Square

4 / 3

4:3

16 / 9

16:9

Each element has the same width, but its height is calculated from the specified aspect ratio.

The <ratio> data type is primarily used to describe proportional relationships for sizing and media features, including:

aspect-ratio

Ratio values are also used by aspect-ratio media features such as aspect-ratio, min-aspect-ratio, and max-aspect-ratio.

Specifications

The <ratio> data type is defined in the CSS Values and Units Module Level 4 .

CSS <ratio> Data Type