Image

Classes utilitaires pour contrôler le comportement et l'apparence des images. Couvre le redimensionnement responsive, le recadrage via object-fit, les coins arrondis et le style miniature.

Stable CSS uniquement

Aperçu

LIVE PREVIEW — CLASSES IMAGE

.img-fluid — largeur maximale 100%, hauteur automatique

.img-cover — remplit le conteneur, recadrage cover

.img-contain — remplit le conteneur, recadrage contain

.img-rounded — coins arrondis via variable CSS

.img-thumbnail — bordure, padding et fond via variables CSS

Structure HTML

CODE HTML

💡 Indispensable

Les classes .img-cover et .img-contain appliquent width: 100% et height: 100% sur l'image. Le conteneur parent doit avoir des dimensions explicites pour que l'effet soit visible.

Classes CSS

CLASSE	ÉLÉMENT	DESCRIPTION
`.img-fluid`	`<img>`	Limite la largeur de l'image à celle de son conteneur (`max-width: 100%`). La hauteur s'ajuste proportionnellement (`height: auto`).
`.img-cover`	`<img>`	Force l'image à occuper intégralement son conteneur (`width: 100%; height: 100%`) avec `object-fit: cover` : l'image est recadrée sans déformation.
`.img-contain`	`<img>`	Force l'image à occuper intégralement son conteneur (`width: 100%; height: 100%`) avec `object-fit: contain` : l'image est redimensionnée sans recadrage ni déformation.
`.img-rounded`	`<img>`	Applique un arrondi aux coins via la variable CSS `--img-border-radius`.
`.img-thumbnail`	`<img>`	Ajoute un padding, une couleur de fond et une bordure (largeur, style, couleur, radius) via les variables CSS dédiées `--img-thumbnail-*`.

CSS Custom Properties

TOKEN	RÔLE
`--img-border-radius`	Rayon des coins pour `.img-rounded`
`--img-thumbnail-padding`	Padding interne de la miniature
`--img-thumbnail-background-color`	Couleur de fond de la miniature
`--img-thumbnail-border-width`	Épaisseur de la bordure de la miniature
`--img-thumbnail-border-style`	Style de la bordure de la miniature (`solid`, `dashed`…)
`--img-thumbnail-border-color`	Couleur de la bordure de la miniature
`--img-thumbnail-border-radius`	Rayon des coins de la miniature

EXEMPLE DE PERSONNALISATION CSS


                    /* Global variables */

                    :root {

                      --img-border-radius: 8px;

                      --img-thumbnail-padding: 0.25rem;

                      --img-thumbnail-background-color: #ffffff;

                      --img-thumbnail-border-width: 1px;

                      --img-thumbnail-border-style: solid;

                      --img-thumbnail-border-color: #dee2e6;

                      --img-thumbnail-border-radius: 4px;

                    }

Notes & bonnes pratiques

✅ À faire

Toujours définir les dimensions du conteneur parent avant d'utiliser .img-cover ou .img-contain. Sans dimensions explicites, object-fit n'a aucun effet visible.

✅ À faire

Toujours renseigner l'attribut alt sur chaque <img> pour garantir l'accessibilité et le référencement.

❌ À éviter

Ne pas combiner .img-cover et .img-contain sur un même élément : les deux classes définissent object-fit, seule la dernière déclarée sera appliquée.

Image · WEBDEV-UI DOCS / V1