Dynamically Scale Elements Relative To Its Container – Scalable

Category: Javascript , Recommended | August 14, 2017
Views Total:474 views
Official Page:Go to website
Last Update:August 14, 2017


Dynamically Scale Elements Relative To Its Container – Scalable


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

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

You Might Be Interested In:

Leave a Reply