Propriété CSS utile: object-fit

Une propriété CSS longtemps attendue, qui permet de spécifier comment une image (ou vidéo) doit s’adapter à son conteneur.

Les valeurs possibles sont:

  • fill : déformation de l’image, pour remplir le cadre à tout prix.
  • contain : essaie de remplir le cadre tout en gardant toute l’image visible, en la rapetissant s’il le faut.
  • cover : masquage partiel de l’image, pour remplir entièrement le cadre, sans déformation.
  • scale-down : l’image se rétrécit pour rentrer dans le cadre. Peut se comporter comme contain.
  • none : comportement classique, affichage de l’image à taille réelle des pixels.

Exemples :

Support navigateurs: cette propriété n’est pas supportée dans Internet Explorer, elle sera dans Edge dès la version 16. Voir Caniuse.com pour le statut actuel.

Explication du object-fit sur Debug TV

Dans l’épisode 4 de Debug TV, Adrien Cater explique les propriétés object-fit et aspect-ratio.