CSS aspect-ratio Property

❮ Previous Complete CSS Reference Next ❯

Example

Add aspect-ratio to an element:

div {
aspect-ratio: 3 / 2;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The aspect-ratio property allows you to define the ratio between width and height of an element.

If aspect-ratio and width properties are set, the height will follow in the defined aspect ratio.

To better understand the aspect-ratio property, view a demo.

Tip: Use the aspect-ratio property in responsive layouts where elements often vary in size and you want to preserve the ratio between width and height.

Show demo ❯

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.aspectRatio="16/9" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
aspect-ratio	88	88	89	15	74

CSS Syntax

aspect-ratio: number/number|initial|inherit;

Property Values

Property Value	Description	Demo
number	First number specifies the number for width in aspect ratio.	Demo ❯
number	Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

The aspect-ratio property is good for controlling aspect ratio of div elements if the div elements are supposed to vary in size. This can be the case in an image gallery when you want div elements to be flexible in size to look good on all devices, but you also want ratio between width and height of the images to be preserved:

#container > div {
aspect-ratio: 3/2;
}