Aspect Ratio

Defines a ratio between the width and height of an element.

Aspect Ratio
2:1

Structure

As it is not possible to set a dynamic value with wide browser support, the aspect ratio is set with a custom CSS property (--ratio), working on components with the aspect class.

Note that the aspect ratio property is not as well supported in older browsers.

Examples

Sizing

The aspect ratio can be set to any value.

The value can be assigned to the --ratio custom property.

1:1

1:2

4:3

Built by ahme.dev. The source code is available on Github