Web/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
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3413/4b1b647bddca790ab9bc947f4c601698/Ratio4_3.png|class=default internal|Ratio4_3.png]]	4/3	Traditional TV format in the 20th century.
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3410/796b7dab3e8b0d2d1e71e03cee28a6ad/Ratio16_9.png|Ratio16_9.png]]	16/9	Modern "widescreen" TV format.
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3411/f41ac75b472b334cc892cb6abb49e6d8/Ratio1_1.85.png|Ratio1_1.85.png]]	185/100 = 91/50	The most common movie format since the 1960s.
[[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/3412/fdc950b28a7b22b9c03c643f1bee4149/Ratio1_2.39.png|Ratio1_2.39.png]]	239/100	"Widescreen," anamorphic movie format.

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<ratio>	Chrome Full support 3	Edge Full support 12	Firefox Full support 3.5	IE Full support 9	Opera Full support 9.5	Safari Full support 5	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 4.2	Samsung Internet Android Full support 1.0
Accepts <number> / <number> or single <number> as a value.	Chrome No support No	Edge No support No	Firefox Full support 70 Disabled' Full support 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.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

See also

• aspect-ratio media feature

<ratio> by Mozilla Contributors is licensed under CC-BY-SA 2.5.