Letype de donnéesCSS<image> représente une image en deux dimensions.

Syntaxe

Le type de données<image> peut être représenté avec l'une des valeurs suivantes :

• Une image portée par une valeur de type<url>
• Une valeur de type<gradient> qui représente un dégradé
• Une partie d'une page web définie par la fonctionelement()
• Une image, un fragment d'image ou une zone de couleur définie par la fonctionimage()
• Une fusion d'une ou plusieurs images à l'aide de la fonctioncross-fade().
• Une sélection d'images déterminée selon la résolution à l'aide de la fonctionimage-set().
• Généré par unworklet de peinture avec la fonctionpaint().

Description

CSS peut gérer ces différents types d'images :

• Les images avecdes dimensions intrinsèques (c'est-à-dire une taille naturelle), comme celles au format JPEG, PNG, ou dans un autreformat matriciel.
• Les images avecplusieurs dimensions intrinsèques, qui existent en plusieurs versions à l'intérieur d'un même fichier (comme certains formats .ico), auquel cas les dimensions intrinsèques seront celles de l'image la plus grande de la zone et avec les proportions les plus proches de la boîte englobante.
• Les images sans dimension intrinsèque, mais avecdes proportions intrinsèques entre la hauteur et la largeur, comme un fichier SVG ou une image dansun format vectoriel.
• Les imagessans dimension ou proportion intrinsèques, comme les dégradés CSS.

Le moteur CSS détermine lataille effective d'un objet en utilisant : (1) sesdimensions intrinsèques ; (2) sataille indiquée, définie par des propriétés CSS commewidth,height oubackground-size ; et (3) sataille par défaut, déterminée selon la propriété avec laquelle l'image est utilisée :

La taille effective d'un objet est calculée avec l'algorithme suivant :

• Si la taille indiquée définitla largeur et la hauteur, ces valeurs sont utilisées pour la taille effective de l'objet.
• Si la taille indiquée définituniquement la largeur ou la hauteur, la valeur manquante est déterminée à l'aide des proportions intrinsèques si elles existent, de la dimension intrinsèque correspondante si la valeur correspond ou de la taille par défaut de l'objet pour la valeur manquante.
• Si la taille indiquée ne définitni la largeur, ni la hauteur, la taille effective de l'objet est calculée afin de respecter les proportions intrinsèques de l'image sans dépasser la taille par défaut de l'objet sur aucun des deux axes. Si l'image n'a pas de proportions intrinsèques, ce sont celles de l'objet auquel elle s'applique qui sont utilisées et si l'objet n'en a pas non plus, la largeur ou la hauteur manquante est déterminée à partir de la taille par défaut de l'objet.

Accessibilité

Les navigateurs ne fournissent pas d'informations particulières quant aux images d'arrière-plan pour les outils d'assistance. Cela est notamment important pour les lecteurs d'écran qui n'annonceront pas leur présence et ne véhiculeront pas d'informations à leur propos aux personnes. Si l'image contient des informations critiques pour la compréhension générale de la page, il faudra avoir une description sémantique dans le document.

• Comprendre les règles WCAG, explications de la règle 1.1
• Comprendre le critère de réussite 1.1.1, dans le guide de compréhension des WCAG 2.0 du^(angl.)

Syntaxe formelle

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>

Exemples

Images valides

url(test.jpg)               /* Une valeur <url>, qui fonctionne bien si test.jpg est une image existante. */linear-gradient(blue, red)  /* Un dégradé (type <gradient>). */element(#idexistant)        /* Une partie d'une page web, référencée grâce à la fonction element(), qui                               fonctionne bien si "idexistant" est un identifiant existant sur la page. */image(ltr 'fleche.png#xywh=0,0,16,16', red)                            /* Une section 16x16 d'une image commençant dans le coin supérieur gauche                               de l'image originale arrow.png si celle-ci est prise en charge ou sinon                               un damier rouge. Si la langue s'écrit de droit à gauche, l'image est                               renversée horizontalement. */cross-fade(20% url(vingt.png), url(quatrevingt.png))                            /* Des images fusionnées, la première ayant une opacité à 20% et la seconde                               une opacité de 80%. */image-set('test.jpg' 1x, 'test-2x.jpg' 2x)                            /* Une sélection d'image avec des résolutions différentes. */

Images invalides

pasdurl.jpg         /* Un fichier d'image doit être défini à l'aide de la fonction url(). */url(rapport.pdf)    /* Le fichier visé par la fonction url() doit être une image. */element(#idfaux)    /* L'identifiant d'un élément doit correspondre à un identifiant existant. */image(z.jpg#xy=0,0) /* Le fragment spatial doit être écrit selon le format xywh=#,#,#,#. */image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image d'un ensemble doit avoir une résolution différente. */

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée<gradient>
• La fonctionelement()
• La fonctionimage()
• La fonctionimage-set()
• La fonctioncross-fade()