Aspect Ratio in CSS refers to the proportional relationship between the width and height of an element. It represents the ratio of the element’s width to its height. For example, an element with an aspect ratio of 16:9 would have a width that is 16 times larger than its height. CSS offers several ways to specify aspect ratios, including through the use of the “padding-top” or “padding-bottom” properties or by using the “aspect-ratio” property. This is particularly useful when creating responsive layouts where the element needs to adjust its size based on the available screen space.
In this excellent article from Aleksandr Hovhannisyan on how to use ratios in CSS – https://www.aleksandrhovhannisyan.com/blog/css-aspect-ratio/
.element {
aspect-ratio: 16 / 9;
}
.element {
/* roughly the same as 16/9 but with rounding errors */
aspect-ratio: 1.78;
}