CSS <ratio> Data Type

Description

The CSS data type is used for describing aspect ratios. An aspect ratio is the proportion between the width and height of a rectangle. It is expressed as two numbers separated by a forward slash (/). The first number represents the width, and the second number represents the height.

For example, the aspect ratio of a 16:9 video is 16/9 = 1.7777777777777777.

The data type can be used in CSS to set the aspect ratio of an element, or to check the aspect ratio of an element in a media query.

To set the aspect ratio of an element, you can use the aspect-ratio CSS property. The value of the aspect-ratio property can be a , or one of the following keywords:

• auto: The element's aspect ratio is determined by its intrinsic aspect ratio, or by the aspect ratio of its content.
• inherit: The element's aspect ratio is inherited from its parent element.
• initial: The element's aspect ratio is reset to its initial value.
• unset: The element's aspect ratio is removed.

For example, the following CSS code will set the aspect ratio of the div element to 16:9:

div {
  aspect-ratio: 16 / 9;
}

To check the aspect ratio of an element in a media query, you can use the max-aspect-ratio and min-aspect-ratio media query properties. The value of these properties can be a , or one of the keywords auto, inherit, initial, or unset.

For example, the following CSS code will only apply the styles to the div element if its aspect ratio is greater than or equal to 16:9:

@media (min-aspect-ratio: 16 / 9) {
  div {
    /* Styles */
  }
}

The data type is a useful tool for controlling the aspect ratio of elements on your web pages. It can be used to create responsive designs that look good on all devices, and to ensure that your images and videos are displayed correctly.

Syntax

property: <ratio>;

Values

• <ratio>Is a positive (not zero or negative) <integer> followed by optional whitespace, followed by a solidus ('/'), followed by optional whitespace, followed by a positive <integer>.

Example

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

Browser Support

The following table will show you the current browser support for the CSS ratio data type.

Desktop
12	3	3.5	9.5	5

Tablets / Mobile
18	4	14	4.2	1	37

Last updated by CSSPortal on: 7th October 2023