ng2-img-pusher-gif
Easily implement native vertical responsive scaling by creating on-the-fly GIFs via base64.
Dynamic native vertical scaling is difficult. Poor solutions include JavaScript and CSS. By using the img
tag it can be easily accomplished with images, the building blocks of the web that have been around since the dawn of the internet.
The img
tag from day one has been the only element that respects aspect ratios. Taking advantage of this fact, you can use an img
to reposition content in the vertical space, which makes responsive design a breeze.
This is the official Angular 2 version of the plain vanilla JS pusher lib written by my good friend Kirk Strobeck. He has written a condensed article about this strategy here. Kirk and I co-developed this strategy for an application we were working on and have long been excited to share it with others.
Demo
Give it a couple seconds to start up since it's on a heroku instance.
Try out the DEMO!
Install
npm install ng2-img-pusher-gif --save
Usage
You'll need to add ImgPusherGifService
to your components providers
(or application bootstrap
) and also add ImgPusherGifDirective
to your components directives
.
@ public width: number = 200; public height: number = 100;
or...
@ public dimensions: string = '200x100';
Directive
ImgPusherGifDirective
or...
Service
ImgPusherGifService
The service is used internally by the directive. However you can use it directly if needed.
API
createGif(width: number | string, height: number | string)
: generate a base64 encoded gif at the desired width/height. Note arguments can be passed as numbers or strings for convenience.
Contributing
Please see the CONTRIBUTING file for guidelines.
License
MIT