Understanding How CSS3 Aspect-Ratio Property Works

⚡️ The new CSS property 

aspect-ratio

 introduce for all HTML element the capability to auto-sizing.

.square { aspect-ratio: 1 / 1; }

.rectangle { aspect-ratio: 3 / 1; }

.video { aspect-ratio: 16 / 9; }

.ultrawide { aspect-ratio: 21 / 9; }

.intrinsicsize { 
  aspect-ratio: attr(width) / attr(height);
}

🗣 Without the property 

aspect-ratio

, only some elements have a built-in auto-sizing system.

📝 For instance, the 

<img />

 tag when has at least the width value explicitly configured will implicitly calculate the height value and vice-versa.

🤩 Now, using aspect-ratio, even a 

<div>

 can support the auto-sizing mechanism.

📣 The new CSS property 

aspect-ratio

 is useful to create responsive interfaces.

👍 Also, 

aspect-ratio

 help the developers to apply the best practices while working with images on the web since it allows manipulates with high precision the size of a given image using its original aspect ratio, which also will, in parallel, improve the performance metrics on Lighthouse since will be easy to identify images with a wrong resize rule.

⚡️ 

aspect-ratio

 is already supported on Chrome 88. Safari is reportedly working to support it soon. Firefox and Edge are starting to consider the support.