Aspect Ratio Element
Installation
Install via NPM.
npm install aspect-ratio-element
Information
This library registers <aspect-ratio>
using the Custom Elements API.
<!-- Upright A4 Paper -->
<aspect-ratio style="--aspect-ratio: calc(1/1.4142)">
<div class="paper"></div>
</aspect-ratio>
Why not just use CSS?
CSS has a new property called aspect-ratio
, but:
- The element is not constrained on both axes.
- The element's intrinsic size takes priority.
- Safari (incorrectly) requires the element's width or height to be set, preventing its use in layouts that don't use explicit width or height.
License
MIT License
All files can be used for commercial or non-commercial purposes. Do not resell. Attribution is appreciated but not due.