Principe

Les utilitaires object-fit permettent de modifier la façon dont le contenu d'un élément doit être redimensionné pour s'adapter à son conteneur.
Concrètement, on modifie la propriété object-fit de l'élément avec les possibilités suivantes :

  • contain
  • cover
  • fill
  • scale
  • none

A noter la compatibilité avec l'utilisation des breakpoints.

Exemples

Il faut ajouter la classe .object-fit-{value}.

... ... ... ... ... 
<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">
Responsive

Des variantes adaptatives existent également pour chaque object-fit, utilisant le format .object-fit-{breakpoint}-{value}, pour les abréviations de points de rupture suivantes : sm, md, lg, xl, et xxl. Les classes peuvent être combinées pour obtenir différents effets selon vos besoins.

... ... ... ... ... 
<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">
Vidéo

Les utilitaires .object-fit-{value} et .object-fit-{breakpoint}-{value} fonctionnent également sur balises video.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>