DEV Community

Beto Muniz
Beto Muniz

Posted on • Updated on • Originally published at betomuniz.com

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);
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020

Thanks for.making this article!