Spécifier plusieurs largeurs d'espace publicitaire

Katie Hempenius

Essayer cette démonstration

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

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

Afficher le code

• Consultez index.html pour obtenir le code permettant de le faire :

<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 sera : "100 % de la largeur de la fenêtre d'affichage" sur les fenêtres d'affichage de 480 pixels de large maximum, "50 % de la largeur de la fenêtre d'affichage" sur les écrans de 481 à 1 024 pixels de large et 800 pixels sur les écrans de plus de 1 024 pixels de large. Ces largeurs correspondent aux largeurs spécifiées dans le CSS.

La possibilité de spécifier plusieurs largeurs d'emplacements s'adapte aux mises en page de 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'emplacement

• Utilisez une liste d'éléments séparés par une virgule pour spécifier plusieurs largeurs d'emplacements. Chaque élément de liste, à l'exception du dernier, se compose d'une condition multimédia (par exemple, max-width ou min-width) et d'une largeur d'emplacement.
• Le dernier élément de cette liste correspond à la largeur de la zone par défaut. Il s'agit de la valeur par défaut. Vous n'avez donc pas besoin de spécifier de condition multimédia.
• Vous pouvez lister autant de largeurs d'emplacements que vous le souhaitez. Le nombre d'images listées dans srcset n'a pas d'importance.

• La largeur de la fente peut être spécifiée à l'aide de différentes unités. Les largeurs suivantes sont toutes 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)