Aspect Ratio Element

Installation

Install via NPM.

npm install aspect-ratio-element

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>

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.

MIT License

All files can be used for commercial or non-commercial purposes. Do not resell. Attribution is appreciated but not due.