fit( theThing, /* into */ theOtherThing );

Fork me on GitHub Demos

The basics

                            fit( bar, foo );

Cover area

                            fit( bar, foo, { cover: true } );

Horizontal Align

                            fit( bar, foo, { hAlign: fit.RIGHT } );

Vertical Align

                            fit( bar, foo, { vAlign: fit.TOP } );


You can pass options as a 3rd parameter.

Here are the default values and what each parameter means…

                    fit( bar, foo, {
                        // Alignment
                        hAlign: fit.CENTER, // or fit.LEFT, fit.RIGHT
                        vAlign: fit.CENTER, // or fit.TOP, fit.BOTTOM
                        // Fit within the area or fill it all (true)
                        cover: false,
                        // Fit again automatically on window resize
                        watch: false,
                        // Apply computed transformations (true) or just
                        // return the transformation definition (false)
                        apply: true

You can change the options globally if you like too, by modifying the defaults object

                    fit.defaults.vAlign = fit.TOP;
           = true;
                    fit.defaults.cover = true;


You can pass a callback as the 3rd or 4th parameter.

Use it, or the returned object, to apply the computed transform in whatever way you want…

                    fit( bar, foo, function( transform ) {
                        bar.x += transform.tx;
                        bar.y += transform.ty;
                        bar.width *= transform.scale;
                        bar.height *= transform.scale;

You can also pass fit.cssTransform, fit.cssPosition or fit.cssOffset

                    fit( bar, foo, fit.cssPosition );

Custom Transforms

Fit uses CSS3 transforms by default, but you can transform the element however you want, for example…

                            fit( bar, foo, function( transform ) {
                                var style = window.getComputedStyle( bar );
                                var size = parseFloat( style.fontSize );
                                var top = parseFloat( style.marginTop );
                       = top + transform.ty + 'px';
                       = size * transform.scale + 'px';


If you set the watch option to true, fit will trigger automatically on window resize.

You can turn watching on or off at any time and manually trigger repeat fits.

                    // This will trigger a fit each time the window resizes
                    var watching = fit( bar, foo, { watch: true } );
                    // You can stop watching at any time
                    // And start watching again
                    // And trigger a fit manually too