AngularJS directive for the Picturefill responsive image polyfill

Angular Core Dependency: ^1.2.0

Module License: MIT

Added by: Sam Deering





Stars: 18

Watchers: 18

Forks: 2

Module Description

Angular Picture

Angular directive for the Picturefill responsive image polyfill.


  1. bower install angular-picture
  2. Include ngPicturefill in your Angular module.


<!-- Avoid including an `src` attribute, as it would unnecessarily get read by all browsers -->
<img picturefill srcset="images/logo.png, logo_2x.png 2x"/>
<img picturefill ng-srcset="{{ logo }}, {{ logo_2x }} 2x"/>

Using a picture element

<picture picturefill>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <!-- Displays with 2 device pixels per CSS pixel -->
    <source srcset="images/logo.png, images/logo_2x.png 2x"/>
    <!-- Preset media queries -->
    <source srcset="images/logo_4x.png" pf-media="screen-lg"/>
    <source srcset="images/logo_3x.png" pf-media="screen-md"/>
    <source srcset="images/logo_2x.png" pf-media="screen-sm"/>
    <source srcset="images/logo_1x.png" pf-media="screen-xs"/>
    <!-- Custom media query -->
    <source srcset="images/logo_3x.png" pf-media="(min-width: 1000px)"/>
    <!--[if IE 9]></video><![endif]-->
    <img srcset="images/logo.png"/>

Preset media queries

  • screen-xs: Extra small devices (phones, less than 768px).
    • Alias: phone
  • screen-sm: Small devices (tablets, 768px and up).
    • Alias: tablet
  • screen-md: Medium devices (desktops, 992px and up).
    • Alias: desktop
  • screen-lg: Large devices (large desktops, 1200px and up).
    • Alias: lg-desktop
  • landscape: Landscape mode.
  • portrait: Portrait mode.
  • retina: Retina display.

Read more

Module stats last updated: 2017-11-19 16:00:05

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!