Utilitaires

Ajustement d'objet

Les classes object-fit-* indiquent comment une image ou une vidéo s’adapte à la boîte qui la contient. Elles existent aussi pour chaque point de rupture.

Les cinq modes#

Chaque image ci-dessous a la même taille de boîte (largeur et hauteur fixées). Seul le mode d’ajustement change.

Illustration de démonstration — `object-fit-contain`

<div class="d-flex flex-wrap gap-3">
  <figure class="mb-0"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect width='200' height='100' fill='%232B62AA'/%3E%3Ccircle cx='100' cy='50' r='38' fill='%23EAEBEA'/%3E%3Crect x='96' y='0' width='8' height='100' fill='%23387A1B'/%3E%3C/svg%3E" class="object-fit-contain border" width="160" height="120" alt="Illustration de démonstration"><figcaption class="small"><code>object-fit-contain</code></figcaption></figure>
  <figure class="mb-0"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect width='200' height='100' fill='%232B62AA'/%3E%3Ccircle cx='100' cy='50' r='38' fill='%23EAEBEA'/%3E%3Crect x='96' y='0' width='8' height='100' fill='%23387A1B'/%3E%3C/svg%3E" class="object-fit-cover border" width="160" height="120" alt="Illustration de démonstration"><figcaption class="small"><code>object-fit-cover</code></figcaption></figure>
  <figure class="mb-0"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect width='200' height='100' fill='%232B62AA'/%3E%3Ccircle cx='100' cy='50' r='38' fill='%23EAEBEA'/%3E%3Crect x='96' y='0' width='8' height='100' fill='%23387A1B'/%3E%3C/svg%3E" class="object-fit-fill border" width="160" height="120" alt="Illustration de démonstration"><figcaption class="small"><code>object-fit-fill</code></figcaption></figure>
  <figure class="mb-0"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect width='200' height='100' fill='%232B62AA'/%3E%3Ccircle cx='100' cy='50' r='38' fill='%23EAEBEA'/%3E%3Crect x='96' y='0' width='8' height='100' fill='%23387A1B'/%3E%3C/svg%3E" class="object-fit-scale border" width="160" height="120" alt="Illustration de démonstration"><figcaption class="small"><code>object-fit-scale</code></figcaption></figure>
  <figure class="mb-0"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect width='200' height='100' fill='%232B62AA'/%3E%3Ccircle cx='100' cy='50' r='38' fill='%23EAEBEA'/%3E%3Crect x='96' y='0' width='8' height='100' fill='%23387A1B'/%3E%3C/svg%3E" class="object-fit-none border" width="160" height="120" alt="Illustration de démonstration"><figcaption class="small"><code>object-fit-none</code></figcaption></figure>
</div>

Mode différent selon la largeur#

Ajoutez le point de rupture entre object-fit et le mode : ici, l’image est rognée (cover) dès md, et entière (contain) en dessous.

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Crect width='200' height='100' fill='%232B62AA'/%3E%3Ccircle cx='100' cy='50' r='38' fill='%23EAEBEA'/%3E%3Crect x='96' y='0' width='8' height='100' fill='%23387A1B'/%3E%3C/svg%3E" class="object-fit-contain object-fit-md-cover border" width="240" height="120" alt="Illustration de démonstration">

Classes disponibles

Classes disponibles
Classe	Propriété CSS	Comportement
`object-fit-contain`	`object-fit: contain`	Image entière, proportions conservées, des marges peuvent apparaître.
`object-fit-cover`	`object-fit: cover`	La boîte est remplie, l’image est rognée si besoin.
`object-fit-fill`	`object-fit: fill`	L’image est étirée pour remplir la boîte, quitte à la déformer.
`object-fit-scale`	`object-fit: scale-down`	Comme `none` ou `contain`, selon le plus petit résultat.
`object-fit-none`	`object-fit: none`	Taille d’origine, sans redimensionnement.
`object-fit-{sm\|md\|lg\|xl\|xxl}-*`	`object-fit`	Même réglage à partir du point de rupture indiqué (voir Points de rupture).

Bonnes pratiques

À faire

Choisissez cover pour des photos d’agences ou de visuels de carte, et contain pour des logos qui ne doivent jamais être rognés.
Fixez la largeur et la hauteur de la boîte : sans cela, aucun ajustement n’est visible.

À éviter

Évitez fill sur des photos ou des logos : l’image se déforme.

Accessibilité

Toute image porteuse de sens garde un attribut alt explicite, même rognée.
Vérifiez qu’un rognage avec cover ne coupe pas une information essentielle (texte, montant).