Spécifier plusieurs largeurs d'espace publicitaire

Katie Hempenius

Essayer cette démonstration

• Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

• Rechargez l'application dans des fenêtres de taille différente pour voir le navigateur se charger. différentes images et utiliser différentes mises en page en fonction de la taille du navigateur.

Afficher le code

• Consultez index.html pour obtenir le code qui permet ce fonctionnement:

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Que se passe-t-il ?

La valeur de l'attribut sizes indique que la largeur d'affichage de l'image est la suivante: "100% de la largeur de la fenêtre d'affichage" sur des fenêtres d'une largeur maximale de 480 pixels, "50% de la fenêtre d'affichage" largeur" sur les écrans dont la largeur est comprise entre 481 et 1 024 pixels, et 800 pixels sur ceux dont la largeur est supérieure à 1 024 pixels. Ces correspondent à celles spécifiées dans le CSS.

La possibilité de spécifier plusieurs largeurs d'espace publicitaire s'adapte aux mises en page qui utilisent des styles différents (c'est-à-dire des largeurs d'image) pour différentes tailles de fenêtre d'affichage.

Spécifier plusieurs largeurs d'espace publicitaire

• Utilisez une liste d'éléments séparés par une virgule pour spécifier plusieurs largeurs d'emplacements. Chaque élément de la liste, à l'exception du dernier élément, correspond à une condition du support (par exemple, max-width ou min-width) et une largeur d'espace publicitaire.
• Le dernier élément de cette liste est la largeur de l'espace publicitaire par défaut. Il s'agit de la valeur par défaut, donc vous n'avez pas besoin de spécifier une condition pour le support.
• Vous pouvez indiquer autant de largeurs d'emplacements que vous le souhaitez, c'est-à-dire le nombre d'images srcset n'a pas d'importance.

• La largeur de l'emplacement peut être spécifiée à l'aide de différentes unités. Tous les éléments suivants sont Largeurs valides:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

La largeur suivante n'est pas valide:

• 25% (les pourcentages ne peuvent pas être utilisés avec l'attribut tailles)