Aspect ratio

An aspect ratio is the proportional relationship between an element or viewport’s width and height. It is represented as a ratio of two numbers.

Having an aspect ratio, whether it’s an inherent aspect ratio like with images and videos or if it’s extrinsically set, maintains the intended proportions of an element. You can also query an element or viewport’s aspect, which is useful in developing flexible components and layouts.

In CSS, the ratio data type is written as width / height (e.g., 1 / 1 for a square, 16 / 9 for widescreen) or a single number, in which case the number represents the width and the height is 1.