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 | |
---|---|---|
![]() |
4/3 |
Traditional TV format in the 20th century. |
![]() |
16/9 |
Modern "widescreen" TV format. |
![]() |
185/100 = 91/50 (non-integer dividends and divisors are not allowed) |
The most common movie format since the 1960s. |
![]() |
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) |