docs.rodeo

{{CSSRef}}

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 {{cssxref("@media")}} media queries, the aspect-ratio size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property.

Syntax

The <ratio> data type is a {{cssxref("<number>")}} followed by a forward slash (‘/’, Unicode U+002F SOLIDUS) and a second {{cssxref("<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 {{cssxref("<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

Ratio		Usage
`4/3` or `1.33333`		Traditional TV format in the twentieth century.
`16/9` or `1.7777778`		Modern “widescreen” TV format.
`185/100` or `1.85`		The most common movie format since the 1960s.
`239/100` or `2.39`		“Widescreen,” anamorphic movie format.

Formal syntax

{{csssyntax}}

Examples

Use in a media query

@media screen and (min-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

{{Specifications}}

Browser compatibility

{{Compat}}

MDN Web Docs mirror