Picturefill

max-width

Mimics the max-width media query by using the viewport width to determine which image should be displayed.

Instructions

Resize your browser window to see the image swap out.

Code sample

<div data-picture data-alt="Picturefill test">
    <div data-src="img/default.png"></div>
    <div data-src="img/1920x540.png" data-media="(max-width: 1920px)"></div>
    <div data-src="img/1440x405.png" data-media="(max-width: 1440px)"></div>
    <div data-src="img/1024x228.png" data-media="(max-width: 1024px)"></div>
    <div data-src="img/640x180.png"  data-media="(max-width: 640px)"></div>
    <div data-src="img/480x135.png"  data-media="(max-width: 480px)"></div>
    <div data-src="img/320x90.png"   data-media="(max-width: 320px)"></div>
    <noscript><img src="img/noscript.png" alt="Picturefill test" /></noscript>
</div>

Need more info? View the project
Author: Tyson Matanich