Dynamically Scale Elements Relative To Its Container – Scalable

Category: Javascript , Recommended | August 14, 2017
Author: ScriptArtist
Views Total: 341
Official Page: Go to website
Last Update: August 14, 2017
License: MIT

Preview:

Dynamically Scale Elements Relative To Its Container – Scalable

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

});