Create Auto-Resizing Elements with Scalable.js

If you need to make flexible elements that auto-fill their containers I would highly recommend Scalable. This free open-source JS script is perfect for creating a fluid design without much stress.

Read Also: Crop and Resize Images With This Simple jQuery Plugin

Everything in the Scalable.js library is malleable so you can alter every container’s style, size, position, and internal contents. Need elements aligned to the top or bottom of the page? Scalable has options for that.

Take a peek at the GitHub repo to learn more about how this works.

At its most basic form, this script takes a target page element along with some options for customizing the display. Here’s some sample code taken straight from GitHub:

var scalable = new Scalable(containerEl, options);

Naturally, the first parameter is whichever container element you’re targeting(ideally a <div> or something similar).

The options parameter should take an array of key=>value pairs. These options include container height values, min and max widths, along with min and max scales (ie. how much it can scale with the internal elements).

Have a look over the main project page for a usable demo. You can drag the corners of the container to auto-resize the flexible item inside. This is pretty cool since below that area you’ll find usable code taken directly from the page.

There are ways to handle flexible elements with just pure CSS. However, these methods can feel dated and they don’t offer as much control as JavaScript.

If you’d like to try this out just grab a copy from GitHub and see what you think.

Scalable is still in active development but it’s an easy script to edit for your needs.