Dynamically Scale Elements Relative To Its Container – Scalable

Category: Javascript , Recommended | August 14, 2017

0 Comment

Demo Download

AUTHOR:	ScriptArtist
VIEWS TOTAL:	290 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	August 14, 2017
LICENSE:	MIT

---

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

});