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 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; fit.defaults.watch = true; fit.defaults.cover = true;

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

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