aspect-ratio

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

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.

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.

• number - First number specifies the number for width in aspect ratio.
• number - Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default.
• initial - Sets this property to its default value.
• inherit - Inherits this property from its parent element.