Hackernoon logoUnderstanding How CSS3 Aspect-Ratio Property Works by@obetomuniz

Understanding How CSS3 Aspect-Ratio Property Works

Beto Muniz Hacker Noon profile picture

@obetomunizBeto Muniz

Writing about Web Development. I want to show you how amazing the web is.

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

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.