- Passer au contenu principal
- Passer à « À propos de ce site »

# Data Picture

- Documentation
- Questions ou commentaires?

## Intention

Conversion de Picturefill guidé par l'événement.

## Caractéristiques

### Largeur de navigateur

Cet exemple utilise min-width afin de déterminer l'image à afficher. Redimensionner la fenêtre de navigateur pour voir les différentes images qui chargent.

Photo par Noema Pérez, autorisé sous licence Creative Commons.

Visualiser le code

    <figure>
    	<span data-pic="data-pic" data-alt="Colline du Parlement" data-class="img-responsive">
    		<!-- Image par défault : l'élément <div [data-src]> sans attribut data-media est affiché quand :
    				1. Aucun des autres requêtes médias <div [data-src]> correspond.
    				2. Le navigateur ne supporte pas les requêtes médias CSS -->
    		<span data-src="img/parliament-hill-large.jpg"></span>

    		<!-- Images pour les navigateurs qui supportent les requêtes médias CSS -->
    		<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>

    		<!-- Contenu alternatif pour les navigateurs non-JS -->
    		<noscript><img src="img/parliament-hill-large.jpg" alt="Parliament Hill"/></noscript>
    	</span>
    	<figcaption>
    		<p>Photo par <a href="http://www.flickr.com/photos/intercultura/6130311384">Noema Pérez</a>, autorisé sous licence <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/deed.fr_CA">Creative Commons</a>.</p>
    	</figcaption>

### Haute densité de pixels

Cet exemple utilise deux requêtes médias pour servir des images à haute résolution à des appareils qui en bénéficieront (p.ex. écrans Retina).

Photo par snowpeak, autorisé sous licence Creative Commons.

Visualiser le code

    <figure>
    	<span data-pic="data-pic" data-alt="False Kiva dans les Canyonlands" data-class="img-responsive">
    		<!-- Images pour différentes résolutions de l'appareil -->
    		<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>

    		<!-- Contenu alternatif pour les navigateurs non-JS -->
    		<noscript><img src="img/cave-low-res.jpg" alt="False Kiva dans les Canyonlands"/></noscript>
    	</span>
    	<figcaption>
    		<p>Photo par <a href="http://www.flickr.com/photos/snowpeak/7351510924/">snowpeak</a>, autorisé sous licence <a href="http://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
    	</figcaption>
    </figure>

Date de modification :
  2014-02-19