fitObject

A jQuery plugin to fit an object to its container according to a fit parameter that behaves similarly to the CSS background-size keyword syntax.

Codepen Example

Install

npm install fitobject

Usage

For simple cover fitting of an object to a container:

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

<script>
  $('.object').fitObject();
</script>

You can size and position the object to be totally contained inside the container, as with the CSS property background-size: contain:

$('.object').fitObject('contain');

Cover fit safe area

Specify a safeArea parameter to define a region of the object to avoid cropping into when the object fit method is set to 'cover'.

$('.object').fitObject({
  '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
  }
});

Non-immediate ancestor fit container

By default, fitObject will fit your object to its immediate parent, but can fit to ancestors further up the DOM tree by setting the container parameter, assuming any parents between are set to position: static.

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

<script>
  $('.object').fitObject({
    'container': '.container'
  });
</script>

Object data attributes

Each of the fitObject parameters can be set via HTML data attributes on the object to fit:

<div class="container">
  <img class="object" src="http://placehold.it/400x300"
    data-object-fit="cover"
    data-fit-container=".container"
    data-safe-area="{'top':0,'right':21.23,'bottom':0,'left':19.33}"
  />
</div>

<script>
  $('.object').fitObject();
</script>

Object data attributes will supersede parameters passed into the fitObject method.

List of parameters

Parameter	Data Attribute	Type	Default	Description
container	fit-container	String, DOM Node, jQuery DOM element	First parent not classed .fit-object-wrapper	The container to fit the object to
fit	object-fit	String	'cover'	The fit method – either 'cover' or 'contain'
safeArea	safe-area	Object	{ 'top': 0, 'right': 0, 'bottom': 0, 'left': 0 }	An area of the object to avoid cropping into. Specify a percentage of the X or Y dimension for each side.