You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
Kevin MacMartin 8c4ad1aff3 Update the npm dependencie 2 years ago
.editorconfig Clean up syntax, upgrade gulp-uglify and rebuild the minified version 6 years ago
.gitignore Clean up syntax, upgrade gulp-uglify and rebuild the minified version 6 years ago
LICENSE Clean up syntax, upgrade gulp-uglify and rebuild the minified version 6 years ago
README.md Optimize and add support for position by percent to halign and valign, and update gulp to 4.0.0 4 years ago
bower.json Use the non-minified version of contain-element in the bower.json main field as minified files aren't allowed 6 years ago
contain-element-module.js Parse vertical and horizontal alignment separately so one set function doesn't cause the other value to divide itself by 100 4 years ago
contain-element.js Parse vertical and horizontal alignment separately so one set function doesn't cause the other value to divide itself by 100 4 years ago
contain-element.min.js Parse vertical and horizontal alignment separately so one set function doesn't cause the other value to divide itself by 100 4 years ago
gulpfile.js Optimize and add support for position by percent to halign and valign, and update gulp to 4.0.0 4 years ago
package-lock.json Update the npm dependencie 2 years ago
package.json Update the npm dependencie 2 years ago

README.md

Contain Element

A JavaScript plugin to contain an element within its parent element.

Description

The plugin scales an element to the minimum size required for it to be completely contained within its parent, and retains its original aspect ratio by cropping portions that don't fit based on its vertical and horizontal alignment (by default both are set to: center).

Demo

Features

  • Pure JavaScript with no dependencies
  • Configures the horizontal and vertical alignment of the contained element
  • Can detect the native size or have it specified at runtime
  • Importable javascript module version included as contain-element-module.js

Usage

window.onload = function() {
    var contain = new ContainElement({
        element: document.getElementById("element"), // the element to be contained (alternative to 'id')
        id: "element", // the id of the element to be contained (alternative to 'element')
        width: 100, // (optional) native element width in pixels (unset: detected element width)
        height: 100, // (optional) native element height in pixels (unset: detected element height)
        valign: "top", // (optional) vertical alignment: 0-100 (percent) or center|top|bottom (unset: center)
        halign: "20", // (optional) horizontal alignment: 0-100 (percent) or center|left|right (unset: center)
        fit: "contain", // (optional) object fit: cover|contain (unset: cover)
        scale: true // (optional) use transform scale instead of width and height (unset: false)
    });

    // (example) update the size and positioning on window resize
    window.onresize = contain.update;

    // (example) update the size and positioning on orientation change
    window.addEventListener("orientationchange", contain.update);
};

Functions

  • update(): Update the size and position of the contained element.
  • setWidth(width): Set the width (run update() to apply).
  • setHeight(height): Set the height (run update() to apply).
  • setValign(valign): Set the vertical alignment (run update() to apply).
  • setHalign(halign): Set the horizontal alignment (run update() to apply).
  • setFit(fit): Set the object fit (run update() to apply).
  • getWidth(): Return the element width.
  • getHeight(): Return the element height.
  • getCurrentWidth(): Return the current width.
  • getCurrentHeight(): Return the current height.
  • getValign(): Return the current vertical alignment.
  • getHalign(): Return the current horizontal alignment.
  • getFit(): Return the current object fit.
  • getScale(): Return the current scale factor being applied to the contained element.

Credits

Written by Williams New York

Authors

LICENSE

Licensed under the MIT license.