CSS aspect-ratio Property
Add aspect-ratio to an element:
aspect-ratio: 3 / 2;
More "Try it Yourself" examples below.
Definition and Usage
aspect-ratio property allows you to define the ratio between width and height of an element.
width properties are set, the height will follow in the defined aspect ratio.
To better understand the
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.
|Animatable:||yes. Read about animatable Try it|
The numbers in the table specify the first browser version that fully supports the property.
|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|
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:
CSS tutorial: CSS Grid Layout Module
CSS object-fit property: CSS Object-fit property
CSS object-position property: CSS Object-position property