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. |