HTMLImageElement : propriété sizes

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2016.

La propriétésizes de l'interfaceHTMLImageElement permet de définir la largeur de présentation de l'image pour chacune d'une liste derequêtes média. Cela offre la possibilité de sélectionner automatiquement différentes images — même des images d'orientations ou de rapports d'aspect différents — à mesure que l'état du document change pour correspondre à différentes conditions média. Elle reflète l'attribut de contenusizes de l'élément HTML<img>.

Valeur

Une chaîne de caractères. Pour plus d'informations sur la syntaxe de l'attributsizes, voir<img>.

Exemples

Sélection d'une image adaptée à la largeur de la fenêtre

Dans cet exemple, une mise en page de type blog est créée, affichant du texte et une image pour laquelle trois points de taille sont définis, selon la largeur de la fenêtre. Trois versions de l'image sont également disponibles, avec leurs largeurs indiquées. Le navigateur utilise toutes ces informations et sélectionne l'image et la largeur qui correspondent le mieux aux valeurs définies.

La façon dont les images sont utilisées peut dépendre du navigateur et de la densité de pixels de l'écran de l'utilisateur·ice.

Des boutons en bas de l'exemple permettent de modifier légèrement la propriétésizes, en alternant la plus grande des trois largeurs de l'image entre 40em et 50em.

HTML

html

<article>  <h1>An amazing headline</h1>  <div></div>  <p>    This is even more amazing content text. It's really spectacular. And    fascinating. Oh, it's also clever and witty. Award-winning stuff, I'm sure.  </p>  <img    src="new-york-skyline-wide.jpg"    srcset="      new-york-skyline-wide.jpg 3724w,      new-york-skyline-4by3.jpg 1961w,      new-york-skyline-tall.jpg 1060w    "    sizes="(50em <= width <= 60em) 50em,              (30em <= width < 50em) 30em,              (width < 30em) 20em"    alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />  <p>    Then there's even more amazing stuff to say down here. Can you believe it? I    sure can't.  </p>  <button>Last Width: 40em</button>  <button>Last Width: 50em</button></article>

CSS

css

article {  margin: 1em;  max-width: 60em;  min-width: 20em;  border: 4em solid #880e4f;  border-radius: 7em;  padding: 1.5em;  font:    16px "Open Sans",    Verdana,    Arial,    Helvetica,    sans-serif;}article img {  display: block;  max-width: 100%;  border: 1px solid #888888;  box-shadow: 0 0.5em 0.3em #888888;  margin-bottom: 1.25em;}

JavaScript

Le code JavaScript gère les deux boutons qui permettent d'alterner la troisième option de largeur entre 40em et 50em ; cela se fait en gérant l'événementclick et en utilisant la méthode JavaScriptreplace() pour remplacer la partie concernée de la chaînesizes.

const image = document.querySelector("article img");const break40 = document.getElementById("break40");const break50 = document.getElementById("break50");break40.addEventListener(  "click",  () => (image.sizes = image.sizes.replace(/50em,/, "40em,")),);break50.addEventListener(  "click",  () => (image.sizes = image.sizes.replace(/40em,/, "50em,")),);