#aspect-ratio

#Introduction

The aspect-ratio CSS property sets a preferred aspect-ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

#Examples

css-apisrc/aspect-ratio/App.tsx

Preview

#Syntax

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;

#Values

#<ratio>

The box's preferred aspect-ratio is the ratio of width to height. If the height and preceding slash are omitted, height defaults to 1. Size calculations involving aspect-ratio use the dimensions of the box specified by box-sizing.

:::info The <ratio> CSS data type represents a ratio between two numbers. It consists of:

• A positive <number> value
• Followed by a forward slash ('/', Unicode U+002F SOLIDUS)
• Followed by a second positive <number> value
• Alternatively, a single positive <number> is allowed as a value :::

#Formal definition

#Formal syntax

aspect-ratio = <number [0,∞]> [ / <number [0,∞]> ]

#Difference with the web

mdn: aspect-ratio

1. auto is not supported, one has no preferred aspect-ratio by default.

#Compatibility