aspect-ratio property on CSS

⚡️ 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.