⚡️ 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.
Top comments (1)
Thanks for.making this article!