Data Picture

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="https://www.flickr.com/photos/intercultura/6130311384">Noema Pérez</a>, autorisé sous licence <a href="https://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="https://www.flickr.com/photos/snowpeak/7351510924/">snowpeak</a>, autorisé sous licence <a href="https://creativecommons.org/licenses/by/2.0/">Creative Commons</a>.</p>
	</figcaption>
</figure>

Détails de la page

Date de modification :: 2014-02-19