Scalable

Makes the UI elements scalable to fit inside the container area.

View on GitHub

Made by @quiksilverost

Install

npm install scalable --save

Usage

var scalable = new Scalable(containerEl, options);

Options

  • align: left | center | right Horizontal alignment of an element. default: left
  • verticalAlign: top | center | bottom Vertical alignment of an element. default: top
  • containerHeight: fixed | auto Behaviorur of container height property default: fixed
    • fixed - The element fits inside the container.
    • auto - Enlargement of the element increases the height of the container.
  • minWidth: Minimum width of an element.
  • maxWidth: Maximum width of an element.
  • minScale: Minimum scale of an element.
  • maxScale: Maximum width of an element.

Demo

* to see result resize container by right buttom corner

Lord of the Rings

  • 2003
  • 3h 21min
  • Fantasy

Saying that this film starts where `Two Towers' left off is somewhat misleading, for the film starts a great distance from the walls of Helm's Deep. `Return of the King' opens with a flashback of Smeagol (Andy Serkis) obtaining the one ring of power and an origin of his deterioration into the creature Gollum. This opening recaptures an emphasis that was somewhat lost within the epic battles of `Two Towers,' at that's the ring.

Read more
Container
  HTML:
    <div class="container">
        <div class="element">
            ...
        </div>
    </div>

  JS:
    var scalable = new Scalable(".container", {
        align: 'center',
        verticalAlign: 'center'
    });