https://github.com/mhartington/angular-responsive-img

Angular directive to easily place responsive <img>'s using <picture> element
https://github.com/mhartington/angular-responsive-img

Last synced: 14 days ago
JSON representation

Angular directive to easily place responsive <img>'s using <picture> element

• Host: GitHub
• URL: https://github.com/mhartington/angular-responsive-img
• Owner: mhartington
• License: mit
• Created: 2014-08-21T22:50:21.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-02-10T03:36:11.000Z (almost 11 years ago)
• Last Synced: 2024-12-07T17:44:00.887Z (19 days ago)
• Homepage: http://brochachos.github.io/angular-responsive-img/
• Size: 340 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Load different images based on your window settings.

## Getting started

* Use `bower` to install `angular-responsive-img`.

```

bower install angular-responsive-img

```

* Include `responsive-img.js` or `responsive-img.min.js` between your JS files.

```html

// index.html

```

* Include `brc.angular-responsive-img` as a module in your project (usually in `app.js`).

```javascript

// app.js

angular.module('myApp', [

  // ...

  'brc.angular-responsive-img'

  // ...

]);

```

* Start using it everywhere!

```html

// anywhere.html

  

  

  

```

## Demos

### Based on window's width

```html

  

  

  

```

### Based on window's height

```html

  

  

  

```

### Based on window's pixel density

```html

  

  

```

### Mix them up at will!

```html

  

  

  

  

```

### Use it for all your images!

```html

  

  

  

  

  

  

  

  

  

  

```

## Inspiration

Inspired by Tomomi Imura:[@girliemac](https://github.com/girliemac) and her talk about [responsive development](https://speakerdeck.com/girlie_mac/sf-html5-updated-responsive-cross-device-development-with-web-standards)