ngBoxFill

Angular.js directive that scales the content of the element it is applied on to fill the box of the element itself.
1 person uses it
Submitted by: 234220?v=3 fladi

ngBoxFill

Build Status

Angular.js directive that scales the content of the element it is applied on to fill the box of the element itself. It works by transcluding the descendants of the directive into a into an inline element, taking its offsetWidth and offsetHeight and calculating a scaling factor to fill the original element. The aspect ratio of the scaled content is kept intact all the time.

It should work on all browsers that support 2D transformation via CSS.

Resizing the browser window or changing the dimensions of the element with the directive triggers a recaluclation of the scaling factor.

Unlike solutions like ng-fi-text, ng-FitText.js or ng-FitTextDynamic it does not work by approximating the relative font-size but also scales content like images and videos.

Getting started

  • Include the script on your page after the AngularJS tag:

  • Ensure that your application module specifies ngBoxFill as a dependency:

    • Use the directive on any element that should have its content scaled to fit its box:

      .fullscreen { position: absolute; top: 0; right: 0; left: 0; bottom:0; margin: 0 auto; } Hello World!

License

ngBoxFill is licensed under the MIT license. See the LICENSE file for more details.

comments powered by Disqus
This page was last updated over 2 years ago.