The basics
fit( bar, foo );
fit( bar, foo );
fit( bar, foo, { cover: true } );
fit( bar, foo, { hAlign: fit.RIGHT } );
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; fit.defaults.watch = 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 );
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'; });
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();