Picturefill

min-width

Mimics the min-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/320x90.png"   data-media="(min-width: 200px)"></div>
    <div data-src="img/480x135.png"  data-media="(min-width: 321px)"></div>
    <div data-src="img/640x180.png"  data-media="(min-width: 481px)"></div>
    <div data-src="img/1024x228.png" data-media="(min-width: 641px)"></div>
    <div data-src="img/1440x405.png" data-media="(min-width: 1025px)"></div>
    <div data-src="img/1920x540.png" data-media="(min-width: 1441px)"></div>
    <noscript><img src="img/noscript.png" alt="Picturefill test" /></noscript>
</div>

Need more info? View the project
Author: Tyson Matanich