Mention how <ratio> values are compared

[getdagnis]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

The max-aspect-ratio media feature can be a bit counterintuitive. It's not clear how aspect ratio works.

What did you expect to see?

In this case, max-aspect-ratio actually means "maximum width-to-height ratio". So, if you set max-aspect-ratio: 16/9, it means the device's width-to-height ratio should be 16:9 or less, i.e., 16:16 is less rather than more.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/@media/aspect-ratio
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/@media/aspect-ratio/index.md
• Last commit: 2ef2c90
• Document last modified: 2024-05-13T06:13:52.000Z

[OnkarRuikar]

An aspect ratio is the proportional relationship between width and height: width / height. So, increasing height decreases the aspect ratio. This has been covered in the aspect ratio glossary page.
Here 16/9 = 1.7777777778 and 16/16 = 1. So 16/9 > 16/16.

If you find max-aspect-ratio: 16/9 confusing, you can use max-aspect-ratio: 1.78 alternatively.

[Josh-Cena]

We can add this to the <ratio> type saying that they are compared by the quotient's numeric value. See spec:

If two <ratio>s need to be compared, divide the first number by the second, and compare the results. For example, 3/2 is less than 2/1, because it resolves to 1.5 while the second resolves to 2. (In other words, “tall” aspect ratios are less than “wide” aspect ratios.)