Reposition DOM Relative To Parent – contain-element

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()