Guide de démarrage de l’image réactive: comment l’utiliser correctement
Vers plusieurs versions d’images Leopard. PNG de l’exemple précédent:
Un des descripteurs optionnels suivants (séparés par des espaces) qui pointent vers l’URL de l’image: descripteur de largeur descripteur de densité de pixels dans mon exemple, j’a I inclus un descripteur de largeur que vous voyez le plus souvent. J’ai inclus trois versions différentes d’images: une grande version haute résolution, et une grande 800 pixels et une autre grande 480 pixels. Notez que lorsque j’utilise le descripteur de largeur dans l’exemple ci – dessus, la syntaxe est la valeur de largeur immédiatement après \
Attribut taille l’attribut taille explosée n’est utilisé qu’avec l’attribut srcset. Vous pouvez utiliser srcset seul (voir la section suivante), mais la façon la plus courante d’utiliser srcset est d’utiliser la taille. La propriété Sizes accepte une liste séparée par des virgules d’une ou plusieurs chaînes. Chaque chaîne contient: une condition média (similaire à une requête média utilisée dans CSS) une valeur qui définit la taille de la \
L’attribut taille ne correspond pas exactement aux trois descripteurs de largeur. Voici le Code:
Langage de code: HTML, le fait que la valeur de fente XML (XML) ne correspond pas exactement au descripteur de largeur est bon. Dans mon exemple, je peux décomposer les valeurs de taille, par exemple: une fenêtre de 600px de largeur chargera une image 480w de la valeur srcset dans une fente de 480px de largeur. Un viewport de 1000px de large charge une image 800W dans une fente 800px. Si les conditions de support précédentes ne sont pas remplies, l’image pleine taille par défaut (2000w) remplit la fente 1000px. La dernière chaîne n’est qu’une valeur de fente et n’a aucune condition de support. Comme nous l’avons mentionné précédemment, cela garantit que le Navigateur affiche quelque chose lorsqu’aucune condition média n’est remplie et qu’il fonctionne correctement par défaut.
Vous pouvez voir l’exemple de code en cours d’exécution en utilisant la démonstration de codepen ci – dessous. Notez que dans ce cas, vous devez tester quelque chose qui imite différents appareils (comme devtools dans Chrome). Vous pouvez également utiliser une variété d’appareils réels pour ouvrir des pages pour des tests réels. Pour plus de commodité, j’a i ajouté une superposition de texte à chaque image afin que vous puissiez voir ce qui est chargé lorsque vous regardez la page. 
Notez qu’une fois l’image originale chargée, l’image ne change pas de taille lorsque vous changez la taille de la fenêtre. Les attributs srcset et Size sont utiles pour charger une image en fonction des conditions du média lors du premier chargement, mais ils ne sont pas utiles pour changer l’image en fonction de la taille de l’écran. Ensuite, je vais vous montrer une fonctionnalité d’image de réponse différente qui résoudra ce problème.
Comme je l’ai mentionné précédemment, lorsque vous utilisez srcset avec un descripteur de densité de pixels, l’attribut srcset peut être utilisé avec le descripteur de densité de pixels. Ce descripteur permet