DEV Community

loading...

aspect-ratio property on CSS

Beto Muniz
Indie Creator @ listtta.com ~ seujob.tech ~ protocoloalterado.com.br • OSS Crafter • Writing about Web Development
Updated on ・1 min read

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

Discussion (1)

Collapse
promikecoder2020 profile image
ProMikeCoder2020

Thanks for.making this article!