CSS aspect-ratio Property

CSS aspect ratio property is used to control the proportional relationship between the width and height of an element. It helps maintain the desired aspect ratio of elements, such as images, videos, and containers, regardless of their size or the size of the viewport.

Syntax:

aspect-ratio: auto | width/height | initial | inherit;

Property Values:

• auto: It means no preferred value is set for the aspect ratio. 
• width/height: It sets the aspect ratio according to their width and height ratio values.
• initial: It is the default value for the aspect-ratio property.
• inherit: The aspect-ratio value is inherited from its parent elements.

CSS aspect-ratio Examples

Example 1: This example displays the image in aspect-ration 1 / 1.

Output:

Example 2: This example displays the image in aspect-ration 16 / 9.

Output:

Supported Browsers:

• Google Chrome 88
• Edge 88
• Firefox 89
• Opera 74
• Safari 15