The CSS aspect-ratio property

The CSS property that helps maintain spacing in responsive layouts.

Una Kravets

Note: Summary: Maintaining a consistent width-to-height ratio, called an aspect ratio, is critical in responsive web design and for preventing cumulative layout shift. Now, there's a more straightforward way to do this with the new aspect-ratio property launching in Chromium 88, Firefox 87, and Safari Technology Preview 118.

Aspect ratio

Browser Support

Source

Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio.

The CSS aspect-ratio property Stay organized with collections Save and categorize content based on your preferences.

Aspect ratio

The CSS aspect-ratio property