CSS aspect-ratio Property

Definition and usage

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

If set aspect-ratio and width property, the height will be adjusted according to the defined aspect ratio.

To better understand aspect-ratio property, please see the demonstration.

Tip:In responsive layout aspect-ratio This property, when the size of the element often changes, you want to maintain the ratio between width and height.

Instance

Example 1

Add aspect ratio to the element:

div {
  aspect-ratio: 3 / 2;
}

Try it yourself

Example 2

If the size of the div element needs to change,aspect-ratio This property is very suitable for controlling the aspect ratio of div elements. For example, in a picture gallery, you want the size of div elements to be flexible to adapt to all devices, but at the same time, you want to maintain the aspect ratio of the images:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

Try it yourself

CSS syntax

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

Property value

Technical details

Browser support

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

Related pages

Tutorial:CSS Grid Layout Module

Reference:CSS Object-fit attribute

Reference:CSS Object-position attribute