Angular directive that displays a responsive image with given aspect ratio using background-image
Install it using bower:
bower install angular-bgimg --save
After that, include bower.js and bower.css in your HTML:
#!html
<script src="/bower_components/angular-bgimg/bgimg.js"></script>
<link rel="stylesheet" href="/bower_components/angular-bgimg/bgimg.css">
Add a dependency angular-bgimg
to your angular app, like:
angular.module('app', ['angular-bgimg']);
Now you can use directive:
<bgimg src="'/path/to/image.jpg'" cover ratio="16_9"></bgimg>
- src: Image path. Note that you should use single quotes if you're passing a string directly, otherwise parameter will be interpreted as a variable reference
- cover: Indicates that image should cover area
- contain: Indicates that image should be fitted inside area
- ratio: Aspect ratio in format X_Y. Default is 1:1. Out of the box, the ratios availabe are:
2_1
,1_2
,3_4
,4_3
,5_4
,16_9
and16_10
. Take a look into bgimg.css to find out how to specify more aspect ratios.