ratio property CSS Reference



Definition and Usage

The <ratio> CSS data type, used for describing aspect ratios in media queries, denotes the proportion between two unitless values. It is a strictly positive <integer> followed by a slash ('/', Unicode U+002F SOLIDUS) and a second strictly positive <integer>. There may be spaces before and after the solidus.


Examples

RatioUsage
4/3Traditional TV format in the 20th century.
16/9Modern, '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)The 'widescreen', anamorphic, movie format.

Compatibility

Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support<43.5 (1.9.1)99.51.0 (?)

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportyesyes?yesyes

Relative articles