Fit.js

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 } );

Configuration

You can pass options as a 3^rd 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;
                    fit.defaults.watch = true;
                    fit.defaults.cover = true;

Callback

You can pass a callback as the 3^rd or 4^th 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 );

Fit.js

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 );
                                bar.style.marginTop = top + transform.ty + 'px';
                                bar.style.fontSize = size * transform.scale + 'px';
                            });

Watching

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
                    watching.off();
                    
                    // And start watching again
                    watching.on();
                    
                    // And trigger a fit manually too
                    watching.trigger();

fit( theThing, / into / theOtherThing );