Data Picture
Purpose
Event driven port of Picturefill.
Features
Browser Width
This example uses min-width to determine which image should be displayed. Resize the browser window to see the different images load.
Photo by Noema Pérez, licensed under Creative Commons.
View code
<figure>
<span data-pic="data-pic" data-alt="Parliament Hill" data-class="img-responsive">
<!-- Default image: <div [data-src]> with no data-media attribute is displayed when:
1. None of the other <div [data-src]> media queries match.
2. The browser doesn't support media queries -->
<span data-src="img/parliament-hill-large.jpg"></span>
<!-- Images for browsers with CSS media query support -->
<span data-src="img/parliament-hill-small.jpg" data-media="(min-width: 0px)"></span>
<span data-src="img/parliament-hill-medium.jpg" data-media="(min-width: 500px)"></span>
<span data-src="img/parliament-hill-large.jpg" data-media="(min-width: 960px)"></span>
<span data-src="img/parliament-hill-extralarge.jpg" data-media="(min-width: 1200px)"></span>
<!-- Fallback content for non-JS browsers. -->
<noscript><img src="img/parliament-hill-large.jpg" alt="Parliament Hill"/></noscript>
</span>
<figcaption>
<p>Photo by <a href="https://www.flickr.com/photos/intercultura/6130311384">Noema Pérez</a>, licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/deed.en_CA">Creative Commons</a>.</p>
</figcaption>High Pixel Density
This example uses two media queries to serve high resolution images to devices that will benefit from them (i.e. Retina displays).
Photo by snowpeak, licensed under Creative Commons.
View code
<figure>
<span data-pic="data-pic" data-alt="False Kiva in the Canyonlands" data-class="img-responsive">
<!-- Images for different device resolutions -->
<span data-src="img/cave-low-res.jpg"></span>
<span data-src="img/cave-high-res.jpg" data-media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)"></span>
<!-- Fallback content for non-JS browsers -->
<noscript><img src="img/cave-low-res.jpg" alt="False Kiva in the Canyonlands"/></noscript>
</span>
<figcaption>
<p>Photo by <a href="https://www.flickr.com/photos/snowpeak/7351510924/">snowpeak</a>, licensed under <a href="https://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
</figcaption>
</figure>Page details
- Date modified: