<ratio>

The <ratio> CSS data type describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the <ratio> is used as a value for the aspect-ratio media feature in @media media queries, the aspect-ratio size feature in @container container queries, and as a value for the CSS aspect-ratio property.

Syntax

The <ratio> data type is a <number> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second <number>. Both numbers must be positive. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height. In addition a single <number> as a value is allowable.

Two ratios are compared using the quotients' numeric values. For example, 16/16 is less than 16/9 because it resolves to 1 while the second resolves to 1.7. This means a tall screen's aspect ratio is smaller than a wide screen's, and portrait images have smaller aspect ratios than landscape images.

Common aspect ratios

Formal syntax

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

Examples

Use in a media query

@media screen and (aspect-ratio >= 16/9) {
 /* ... */
}

Use in a @container size query

@container (aspect-ratio > 1) and (width < 20em) {
 /* ... */
}

Use as a CSS property value

.square {
 aspect-ratio: 1 / 1;
}
.circle {
 aspect-ratio: 1;
 border-radius: 50%;
}
.portrait {
 aspect-ratio: 5 / 7;
}

Specifications

Browser compatibility

See also

• aspect-ratio media descriptor
• Understanding aspect ratios
• CSS container queries guide
• Using container size and style queries guide
• CSS media queries module
• CSS containment module
• CSS box sizing module
• CSS values and units module