Understanding How CSS3 Aspect-Ratio Property Works

⚡️ The new CSS property 

aspect-ratio

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

🗣 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.

Also published at https://dev.to/obetomuniz/aspect-ratio-property-on-css-7lh