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

An Introduction To Web Monetization API

Subscribe my Newsletter

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Understanding How CSS3 Aspect-Ratio Property Works

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

An Introduction To Web Monetization API

HTML5’s responsive image implementation is missing a way to handle aspect ratios

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

An Introduction To Web Monetization API

HTML5’s responsive image implementation is missing a way to handle aspect ratios

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps