Le type de donnée CSS <image> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL), et les images générées dynamiquement comme les dégradés ou les images construites à partir de fragments de l'arbre du DOM.

Le CSS permet de manipuler différentes sortes d'images :

  • les images avec des dimensions intrinsèques, qui ont une taille propre, comme une image au format jpeg qui possède des dimensions fixes.
  • les images avec plusieurs dimensions intrinsèques, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.
  • les images sans dimensions intrinsèques avec un ratio intrinsèque, entre la largeur et sa hauteur, comme certaines images vectorielles, au format SVG par exemple.
  • les images n'ayant ni dimensions intrinsèques, ni ratio intrisèque, comme un dégradé CSS par exemple.

Le CSS détermine la taille concrète de l'objet en utilisant ces dimensions intrinsèques, la taille spécifiée définie par les propriétés CSS comme width, height ou background-size, et la taille par défaut de l'objet définie en fonction de la propriété utilisée :

Type d'objet Taille par défaut de l'objet
background-image La taille de la zone de positionnement de l'arrière-plan
list-style-image La taille d'un caractère de 1em
border-image La taille de la zone de bordure de l'élément
cursor La dimension correspondant à la taille d'un curseur sur le système utilisé
Contenu remplacé comme avec la combinaison de la propriété CSS content avec les pseudo-éléments ::after et ::before Un rectangle de 300px × 150px

La taille concrète de l'objet est calculée selon l'algorithme suivant :

  • si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.
  • si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.
  • si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.

Les images peuvent être utilisées pour de nombreuses propriétés CSS comme background-image, border-image, content, list-style-image ou cursor.

Note : tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section compatibilité des navigateurs pour une liste explicative.

Syntaxe

Un type de donnée CSS <image> peut représenter un type parmi les suivants :

  • une image dénotée par le type de donnée CSS <uri> et la fonction url() ;
  • une valeur CSS <gradient> (représentant un dégradé) ;
  • une partie de la page, définie par la fonction element().

Exemples

Voici des exemples valides d'images :

url(test.jpg)                          /* La fonction url() fonctionne tant que test.jpg est bien une image */
linear-gradient(to bottom, blue, red)  /* Un dégradé (<gradient>) */
element(#colonne3)                     /* Utilisation d'un élément de la page via la fonction element(),
                                          si colonne3 est bien un identifiant CSS existant. */

Voici des exemples invalides :

cervin.jpg                             /* Le fichier de l'image doit être ciblé via la fonction url(). */
url(report.pdf)                        /* Le fichier référencé par la fonction url() doit être une image. */
element(#fakeid)                       /* Ne fonctionne pas si 'fakeid' n'est pas un identifiant existant. */

Spécifications

Spécification État Commentaires
CSS Image Values and Replaced Content Module Level 3 Candidat au statut de recommandation Avant CSS3, il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle url().

Compatibilité des navigateurs

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
<uri> (Oui) (Oui) (Oui) (Oui) (Oui)
<gradient> (Oui)
limité à background-image & background-moz
(Oui)-webkit IE 10-ms (Oui)-o (Oui)-webkit
element() 4.0 (2.0) limité à background-image & background-moz ? ? ? ?
Fonctionnalité Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
<uri> (Oui) (Oui) (Oui) (Oui) (Oui)
<gradient> (Oui)
limité à background-image & background-moz
? ? ? ?
element() 4.0 (2.0) limité à background-image & background-moz ? ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, jsx, slayslot, mrstork, fscholz, teoli, FredB, Goofy
 Dernière mise à jour par : SphinxKnight,