Makes UI Elements Scalable To Fit The Container Area

By webcodeflow

Makes UI elements scalable to fit the container’s region library that dynamically changes the size of any element while preserving the original aspect ratio and alignment within the original container.

css transform scale dynamically, css calculate height dynamically based on another element, div scale to fit content, css width relative to another element, css transform scale to fit

How to make use of it:

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 The behavior 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.