<image>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Le type de données CSS <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 fonction element()
Une image, un fragment d'image ou une zone de couleur définie par la fonction image()
Une fusion d'une ou plusieurs images à l'aide de la fonction cross-fade().
Une sélection d'images déterminée selon la résolution à l'aide de la fonction image-set().

Description

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

Les images avec des dimensions intrinsèques (c'est-à-dire une taille naturelle), comme celles au format JPEG, PNG, ou dans un autre format matriciel.
Les images avec plusieurs 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 avec des proportions intrinsèques entre la hauteur et la largeur, comme un fichier SVG ou une image dans un format vectoriel.
Les images sans dimension ou proportion intrinsèques, comme les dégradés CSS.

Le moteur CSS détermine la taille effective d'un objet en utilisant :

Ses dimensions intrinsèques
Sa taille indiquée, définie par les propriétés CSS telles que width, height, ou background-size
Sa taille par défaut, déterminée en fonction de la propriété avec laquelle l'image est utilisée (voir le tableau qui suit)

Type d'objet (propriété CSS)	Taille par défaut de l'objet
`background-image`	La taille de la zone de positionnement de l'arrière-plan de l'élément
`list-style-image`	La taille d'un caractère en `1em`
`border-image-source`	La taille de la zone de bordure de l'élément
`cursor`	La taille définie par le navigateur qui correspond à la taille du curseur du système client
`mask-image`	?
`shape-outside`	?
`mask-border-source`	?
`symbols()` pour `@counter-style`	Fonctionnalité à risque. Si prise en charge, la taille est celle du curseur du système client
`content` pour un pseudo-élément (`::after`/`::before`)	Un rectangle de 300px par 150px

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

Si la taille indiquée définit la largeur et la hauteur, ces valeurs sont utilisées pour la taille effective de l'objet.
Si la taille indiquée définit uniquement 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éfinit ni 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.

Note : Tous les navigateurs ne prennent pas en charge tous les types d'image pour chaque propriété. Voir le tableau de compatibilité pour plus de détails.

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.

Syntaxe formelle

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Exemples

Images valides

css

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

css

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

Specification
CSS Images Module Level 3 # image-values

Compatibilité des navigateurs

BCD tables only load in the browser