fitobject

fitobject

Given an object and its container, size and position the object to fit the container based on the fit parameter according to the behavior of the 'cover' and 'contain' values of the CSS background-size property.

Install

npm install fitobject

Usage

<div class="container">
  <img class="object" src="http://placehold.it/400x300" />
</div>

<script>
  var fitObject = require('fitobject');
  fitObject('.object', '.container', 'cover');
</script>

The third argument specifies how the object should be fit to its container. Specify either 'cover' or 'contain'.

The fitObject function also accepts a "safe area" as a fourth, optional argument an object. When the object fit method is set to 'cover', the safe area can define a region of the object to avoid cropping into.

Here is the above example again with a safe area defined:

var safeArea = {
  'top': 25,   // 25% of the vertical dimension from the top
  'right': 0,  // 0% of the horizontal dimension from the right
  'bottom': 0, // 0% of the vertical dimension from the bottom
  'left': 50   // 50% of the horizontal dimension from the left
}

fitObject('.object', '.container', 'cover', safeArea);