Coverer

Installation

npm install coverer

Usage

// selector is an element selector (e.g., #element).
// aspectRatio is defined as width / height.
Coverer.cover(selector, aspectRatio);

import

import { Coverer } from 'coverer';

Coverer.cover('#something', 1.25);

require

const Coverer = require('coverer').Coverer;

Coverer.cover('#something-else', 16 / 9);

script element

<script src="somewhere/coverer.min.js"></script>
<script>
	Coverer.cover('#another-thing', 4 / 3);
</script>

Notes

This does not automatically make the selected element to be non-interactable nor does it set the z-index to some value. This is done on purpose in case the user wants the element to be interactable and/or if they want to set a custom z-index value.

#some-element {
  /* Disables cursor interaction. */
  pointer-events: none;
  /* Sets this element behind everything, assuming that there isn't something
     else with a z-index that's less than or equal to -100.  Usually any value
	 less than 0 will work. */
  z-index: -100;
}