<ratio>

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

Syntax

A ratio consists 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.

Examples

  Ratio Usage
Ratio4_3.png 4/3 Traditional TV format in the 20th century.
Ratio16_9.png 16/9 Modern "widescreen" TV format.
Ratio1_1.85.png 185/100 = 91/50
(non-integer dividends and divisors are not allowed)
The most common movie format since the 1960s.
Ratio1_2.39.png 239/100
(non-integer dividends and divisors are not allowed)
"Widescreen", anamorphic movie format.

Specifications

Specification Status Comment
Media Queries
The definition of '<ratio>' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 3.5 (1.9.1) 9 9.5 (Yes)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? (Yes) (Yes)

See also

Document Tags and Contributors

 Contributors to this page: mfluehr, Sebastianz, fscholz, teoli, kscarfone, velvel53, Sheppy, FredB
 Last updated by: mfluehr,