Ratioed

Dynamic Aspect Ratios

by Julien Etienne

JavaScript

/*
RATIOED - A safe solution for aspect ratio manipulation.

Why? 

At the time of creating this library, support for aspect-ratio CSS property is not yet great.

A real-time solution that conforms well to the standard will require an additional JavaScript overhead.

Due to the nature of this problem it's easy to create a solution that becomes unpredicatbale and introduces more problems. 

Usage 
- Add the "<aspect-ratio></aspect-ratio>" custom-element tag into the target container you want to preserve the aspect ratio of.
- Call ratioed(): This will convert all <aspect-ratio></aspect-ratio> tags into <img/> tags.
- Ratioed will also convert all the siblings of the aspect-ratio-image to have an absolute position of top 0 and left 0
- Set the width and/ or height of the aspect-ratio-image selector in your CSS to impact your target container.

There are few scenarios where "position: absolute" will not be feasible for inner containers.

In some cases this soltuion is more consistent than the "aspect-ratio" property as it is simply using layout rules that have existed for decades.

You can override all aspects of aspectus so you are not left fighting with code in the future. this also makes it easy to remove when aspect-ratio support is better.

If you don't want to use it, just add a blank image to a container and make an inner container with your content that has a position of absolute.
It's not a big deal. Enjoy ;)

PS. This will probably not work well with React or any virtual-DOM based libraries.
*/

// A light-weight built-in image.
const defaultImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';

const ratioed = (options = {}) => {
  const aspectRatioRule = (className, aspectRatioInsertRule) => `.${className} ${aspectRatioInsertRule}`;
  const aspectRatioClassName = options.aspectRatios?.className || 'aspect-ratio';
  const aspectRatioInsertRule = options.aspectRatios?.insertRule ||...