angular-responsive-img

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

Homepage

Module License: MIT

Added by: Sam Deering

GitHub

Repository

brochachos/angular-responsive-img

Stats

Stars: 9

Watchers: 9

Forks: 1

Author

Brochachos
Brochachos

Module Description

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.
// index.html
<script type="text/javascript" src="responsive-img.js"></script>
  • Include brc.angular-responsive-img as a module in your project (usually in app.js).
// app.js
angular.module('myApp', [
  // ...
  'brc.angular-responsive-img'
  // ...
]);
  • Start using it everywhere!
// anywhere.html
<picture width="200" height="200">
  <source size="max-width: 400" src="http://fakeimg.pl/400/">
  <source size="max-width: 800" src="http://fakeimg.pl/800/">
  <source src="http://fakeimg.pl/1000/">
</picture>

Demos

Based on window's width

<picture width="200" height="200">
  <source size="max-width: 400" src="http://fakeimg.pl/400/">
  <source size="max-width: 800" src="http://fakeimg.pl/800/">
  <source src="http://fakeimg.pl/1000/">
</picture>

Based on window's height

<picture width="200" height="200">
  <source size="max-height: 200" src="http://fakeimg.pl/200/">
  <source size="max-height: 400" src="http://fakeimg.pl/400/">
  <source src="http://fakeimg.pl/800/">
</picture>

Based on window's pixel density

<picture width="200" height="200">
  <source dpi="2" src="http://fakeimg.pl/900/">
  <source src="http://fakeimg.pl/450/">
</picture>

Mix them up at will!

<picture width="200" height="200">
  <source dpi="2" src="http://fakeimg.pl/900/">
  <source size="max-width: 400, max-height: 200" src="http://fakeimg.pl/400x200">
  <source size="max-width: 800, max-height: 400" src="http://fakeimg.pl/800x400">
  <source src="http://fakeimg.pl/1000x800">
</picture>

Use it for all your images!

<picture width="200" height="200">
  <source size="max-width: 1000" src="http://fakeimg.pl/800">
  <source src="http://fakeimg.pl/900">
</picture>
<picture width="200" height="200">
  <source size="max-width: 950" src="http://fakeimg.pl/750">
  <source src="http://fakeimg.pl/900">
</picture>
<picture width="200" height="200">
  <source size="max-width: 900" src="http://fakeimg.pl/700">
  <source src="http://fakeimg.pl/900">
</picture>
<picture width="200" height="200">
  <source size="max-width: 850" src="http://fakeimg.pl/650">
  <source src="http://fakeimg.pl/900">
</picture>
<picture width="200" height="200">
  <source size="max-width: 800" src="http://fakeimg.pl/600">
  <source src="http://fakeimg.pl/900">
</picture>

Inspiration

Inspired by Tomomi Imura:@girliemac and her talk about responsive development

Module stats last updated: 2015-06-08 00:31:50

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!