Author: | WilliamsNY |
---|---|
Views Total: | 83 views |
Official Page: | Go to website |
Last Update: | June 7, 2018 |
License: | MIT |
Preview:

Description:
contain-element is a small JavaScript library that dynamically positions your DOM element relative to its parent container.
The library has the ability to reposition, resize and crop any DOM element while preserving the original aspect ratio, similar to the CSS background-position
property.
How to use it:
Import the JavaScript file into the html document.
<script src="contain-element.min.js"></script>
Initialize the contain-element on the target element.
window.onload = function() { var instance = new ContainElement({ element: document.getElementById("element"), // or id: "element", }); };
Specify the size of the element.
window.onload = function() { var contain = new ContainElement({ element: document.getElementById("element"), // or id: "element", // width/height width: 300, height: 300, // vertica/horizontal alignment // default: center valign: "top", halign: "20", // cover or contain fit: "cover", // use transform scale instead of width and height scale: false }); };
Available API methods.
// updates the size and position of the element. instance.update() // sets the size and alignment instance.setWidth(width) instance.setHeight(height) instance.setValign(valign) instance.setHalign(halign) // sets the fit method instance.setFit(fit) // gets information instance.getWidth() instance.getHeight() instance.getCurrentWidth() instance.getCurrentHeight() instance.getValign() instance.getHalign() instance.getFit() instance.getScale()