⚡️ The new CSS property introduce for HTML element the capability to auto-sizing. aspect-ratio all { : / ; } { : / ; } { : / ; } { : / ; } { : (width) / (height);
} .square aspect-ratio 1 1 .rectangle aspect-ratio 3 1 .video aspect-ratio 16 9 .ultrawide aspect-ratio 21 9 .intrinsicsize aspect-ratio attr attr 🗣 Without the property , only some elements have a built-in auto-sizing system. aspect-ratio 📝 For instance, the tag when has at least the width value explicitly configured will implicitly calculate the height value and vice-versa. <img /> 🤩 Now, using aspect-ratio, even a can support the auto-sizing mechanism. <div> 📣 The new CSS property is useful to create responsive interfaces. aspect-ratio 👍 Also, 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 . aspect-ratio since will be easy to identify images with a wrong resize rule Lighthouse ⚡️ is already supported on Chrome 88. Safari is reportedly working to support it soon. Firefox and Edge are starting to consider the support. aspect-ratio Also published at https://dev.to/obetomuniz/aspect-ratio-property-on-css-7lh

Subscribe my Newsletter

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Understanding How CSS3 Aspect-Ratio Property Works

Too Long; Didn't Read

Company Mentioned

Beto Muniz

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Understanding How CSS3 Aspect-Ratio Property Works

Too Long; Didn't Read

Company Mentioned

Beto Muniz

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES