Beta
Added in 2.0.0
This component allows you to force an element's size to adhere to a specific ratio.
Usage
If you don’t know the exact dimensions of an element but know the ratio, you can set a custom property scoped right to the element you need it on. This will force the element’s height to width ratio to be maintained no matter how big or small it gets.
Note We use data-aspect-ratio as a fallback for browsers that do not support CSS custom properties. A small number of popular sizes are available to these older browsers.
<div style="--aspect-ratio: 16/9;" data-aspect-ratio="16/9"></div>
This is particularly useful for embedded media elements such as videos and images.
