Press "Enter" to skip to content

Makes UI Elements Scalable To Fit The Container Area

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:


npm install scalable --save


var scalable = new Scalable(containerEl, options);


  • alignleft | center | right Horizontal alignment of an element. default: left
  • verticalAligntop | center | bottom Vertical alignment of an element. default: top
  • containerHeightfixed | 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.

dynamically scale elements relative to its containers, Scalable Plugin/Github, css transform scale container height, scale div to viewport, css proportional scaling

See Demo And Download

Official Website(ScriptArtist): Click Here

This superior jQuery/javascript plugin is developed by ScriptArtist. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.