W3cubDocs

/CSS

<ratio>

The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values.

Syntax

In Media Queries Level 3, the <ratio> data type consisted of a strictly positive <integer> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer>. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.

In Media Queries Level 4, the <ratio> date type is updated to consist of a strictly positive <number> followed by a forward slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <number>. In addition a single <number> as a value is allowable.

Formal syntax

Examples

Use in a media query

@media screen and (min-aspect-ratio: 16/9) {
  /* … */
}

Common aspect ratios

Ratio Usage
A rectangle that is three units tall and four units wide 4/3 Traditional TV format in the twentieth century.
A rectangle that is nine units tall and sixteen units wide 16/9 Modern "widescreen" TV format.
A rectangle that is 1 unit tall and 1.85 units wide 185/100 = 91/50 The most common movie format since the 1960s.
A rectangle that is 1 unit tall and 2.39 units wide 239/100 "Widescreen," anamorphic movie format.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
ratio 3 12 3.5 9 9.5 5 ≤37 18 4 14 4.2 1.0
number_value No No 70 No No No No No No No No No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/ratio