Spécifier plusieurs largeurs d'espace publicitaire

Katie Hempenius
Katie Hempenius
X

Essayer cette démo

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

  • Actualisez l'application dans des fenêtres de navigateur de tailles différentes pour voir le navigateur charger différentes images et utiliser différentes mises en page pour différentes tailles de 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 sera "100% de la largeur de la fenêtre d'affichage" dans les fenêtres d'affichage jusqu'à 480 pixels, "50% de la largeur de la fenêtre d'affichage" sur les écrans de 481 à 1 024 pixels et 800 pixels sur les écrans de plus de 1 024 pixels. Ces largeurs correspondent à celles spécifiées dans le CSS.

La possibilité de spécifier plusieurs largeurs d'emplacement 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'emplacement. À l'exception du dernier, chaque élément de la liste se compose d'une condition de média (par exemple, max-width ou min-width) et d'une largeur d'emplacement.
  • Le dernier élément de cette liste est la largeur d'emplacement par défaut. Il s'agit de la valeur par défaut. Vous n'avez donc pas besoin de spécifier de condition de média.
  • Vous pouvez répertorier autant de largeurs d'emplacement que vous le souhaitez. Le nombre d'images répertoriées dans srcset n'a pas d'importance.

  • La largeur de l'emplacement peut être spécifiée à l'aide de différentes unités. Toutes les largeurs valides sont les suivantes:

  • 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)