Dynamically Scale Elements Relative To Its Container – Scalable

Preview:

Description:

Scalable is a simple, lightweight JavaScript element resizing library which dynamically resizes any element while keeping the original aspect ratio and alignment inside its parent container.

Install the scalable with NPM:

$ npm install scalable

How to use it:

Import the Scalable JavaScript into the document.

<script src="build/scalable.js"></script>

Let’s say you have an element inside the ‘container’ element as this:

<div class="container">
  <div class="myElement">
    Resizable element here
  </div>
</div>

Create a new scalable object and specify the container element.

var scalable = new Scalable(".container", {
    // options here
});

That’s it. All possible options to customize the Scalable.

var scalable = new Scalable(".container", {
    // left | center | right 
    align: left,
    // top | center | bottom
    verticalAlign: top,
    // fixed | auto
    containerHeight: fixed,
    
    // minimum width
    minWidth: null,
    // maximum width
    maxWidth: null,
    // minimux scale
    minScale: null,
    // maximum scale
    maxScale: null
});