⚡️ The new CSS property <code>aspect-ratio</code> introduce for all HTML element the capability to auto-sizing.
<pre><code class="lang-css">.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);
}
</code></pre>
🗣 Without the property <code>aspect-ratio</code>, only some elements have a built-in auto-sizing system.
📝 For instance, the <code>&lt;img /&gt;</code> tag when has at least the <code>width</code> value explicitly configured will implicitly calculate the <code>height</code> value and vice-versa.
🤩 Now, using <code>aspect-ratio</code>, even a <code>&lt;div&gt;</code> can support the auto-sizing mechanism.
📣 The new CSS property <code>aspect-ratio</code> is useful to create responsive interfaces.
👍 Also, <code>aspect-ratio</code> 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 <a target="_blank" href="https://developers.google.com/web/updates/2017/10/lighthouse#aspect">Lighthouse since will be easy to identify images with a wrong resize rule</a>.
⚡️ <code>aspect-ratio</code> is already supported on Chrome 88. Safari is reportedly working to support it soon. Firefox and Edge are starting to consider the support.

⚡️ The new CSS property `aspect-ratio` introduce for **all** HTML element the capability to auto-sizing.

```css
.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](https://developers.google.com/web/updates/2017/10/lighthouse#aspect).

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

aspect-ratio property on CSS