Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Utilisation des Images en CSS | Ajout d'Effets Décoratifs avec CSS
Fondamentaux De CSS

bookUtilisation des Images en CSS

Nous savons que les images jouent un rôle crucial sur une page web. Elles permettent de présenter le contenu de manière efficace et claire. Parfois, l’image du contenu peut avoir une taille supérieure ou inférieure à celle du conteneur dans lequel elle doit s’afficher, ou bien son rapport d’aspect peut différer de celui du conteneur. Nous allons examiner comment afficher une image de la meilleure façon possible.

object-fit

object-fit définit la manière dont une image doit être redimensionnée pour s’adapter à son conteneur.

object-fit: fill | contain | cover | none | scale-down;
  • fill étire l’image pour remplir le conteneur, sans tenir compte de son rapport d’aspect. Cela peut entraîner un recadrage ou une déformation de l’image ;
  • contain adapte l’image à la taille du conteneur tout en préservant son rapport d’aspect. Cela peut générer des espaces vides autour de l’image si le rapport d’aspect de l’image et du conteneur diffèrent ;
  • cover adapte l’image pour recouvrir entièrement le conteneur tout en préservant son rapport d’aspect ;
  • none affiche l’image à sa taille d’origine, sans tenir compte de la taille du conteneur. Cela peut provoquer un débordement de l’image hors du conteneur ;
  • scale-down réduit l’image pour l’adapter au conteneur si elle est plus grande que sa taille naturelle, ou affiche l’image à sa taille naturelle si elle tient dans le conteneur.
index.html

index.html

index.css

index.css

copy

object-position

object-position spécifie la position de l'image à l'intérieur de son conteneur. Elle accepte deux valeurs : une valeur horizontale et une valeur verticale, ou bien des mots réservés.

object-position: x y;
index.html

index.html

index.css

index.css

copy
question mark

Que fait la propriété object-fit ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 3

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.56

bookUtilisation des Images en CSS

Glissez pour afficher le menu

Nous savons que les images jouent un rôle crucial sur une page web. Elles permettent de présenter le contenu de manière efficace et claire. Parfois, l’image du contenu peut avoir une taille supérieure ou inférieure à celle du conteneur dans lequel elle doit s’afficher, ou bien son rapport d’aspect peut différer de celui du conteneur. Nous allons examiner comment afficher une image de la meilleure façon possible.

object-fit

object-fit définit la manière dont une image doit être redimensionnée pour s’adapter à son conteneur.

object-fit: fill | contain | cover | none | scale-down;
  • fill étire l’image pour remplir le conteneur, sans tenir compte de son rapport d’aspect. Cela peut entraîner un recadrage ou une déformation de l’image ;
  • contain adapte l’image à la taille du conteneur tout en préservant son rapport d’aspect. Cela peut générer des espaces vides autour de l’image si le rapport d’aspect de l’image et du conteneur diffèrent ;
  • cover adapte l’image pour recouvrir entièrement le conteneur tout en préservant son rapport d’aspect ;
  • none affiche l’image à sa taille d’origine, sans tenir compte de la taille du conteneur. Cela peut provoquer un débordement de l’image hors du conteneur ;
  • scale-down réduit l’image pour l’adapter au conteneur si elle est plus grande que sa taille naturelle, ou affiche l’image à sa taille naturelle si elle tient dans le conteneur.
index.html

index.html

index.css

index.css

copy

object-position

object-position spécifie la position de l'image à l'intérieur de son conteneur. Elle accepte deux valeurs : une valeur horizontale et une valeur verticale, ou bien des mots réservés.

object-position: x y;
index.html

index.html

index.css

index.css

copy
question mark

Que fait la propriété object-fit ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 5. Chapitre 3
some-alt