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.

Examples

Use in a media query

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

Common aspect ratios

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 The most common movie format since the 1960s.
Ratio1_2.39.png 239/100
"Widescreen," anamorphic movie format.

Specifications

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

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
<ratio> 3 12 3.5 9 9.5 5
Accepts <number> / <number> or single <number> as a value. No No 70
Disabled
70
Disabled
Disabled From version 70: this feature is behind the layout.css.aspect-ratio-number.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
<ratio> ≤37 18 4 14 4.2 1.0
Accepts <number> / <number> or single <number> as a value. No No No No No No

See also

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