La gestion des images avec object-fit

La gestion des images avec object-fit

Avez-vous déjà voulu adapter une image à une certaine dimension sans que celle-ci soit déformée ? Les solutions les plus courantes sont le positionnement absolu de l’image par rapport à son conteneur, ou l’utilisation du background-image cover. Si l’on rajoute le fait que l’on ne contrôle pas la data et que par conséquent les images récupérées n’ont pas toutes la même taille, cela peut devenir un joli casse-tête. Pourtant le CSS possède une propriété faite sur mesure pour ces cas précis : object-fit.

Utilisation

La propriété définit comment un élément doit s’ajuster par rapport à son conteneur. S’appliquant sur les éléments de type <img>, <video>, <object> ou <iframe>, cette propriété permet de contrôler le rendu d’une image par rapport à son bloc parent, peu importe les dimensions de celle-ci.

Object-fit peut recevoir 5 différentes valeurs :

contain : l’image garde son ratio d’origine tout en s’ajustant à la taille de son conteneur. L’image sera donc soit agrandie ou rétrécie par rapport à sa taille d’origine.

cover : l’image garde une nouvelle fois son ratio d’origine, mais elle va remplir tout l’espace de son conteneur. Ce qui signifie que dans beaucoup de cas l’image est “cropée”.

fill : l’image va occuper tout l’espace de son conteneur sans se soucier du ratio. Comme vous pouvez l’imaginer, l’image sera déformée dans de nombreux cas.

none : l’image va garder ses dimensions d’origine sans prendre en compte les dimensions de l’élément parent et va éliminer tout ce qui dépasse de celui-ci.

scale-down : cette valeur va comparer le résultat entre none et contain puis optera pour le cas où l’image aura la plus petite taille.

Voyons ça de plus près avec un exemple, les images aux formats vignettes étant un bon cas pratique :

Il faut définir la largeur et la hauteur de l’élément pour qu’object-fit fonctionne. Comme vous avez pu le remarquer, la valeur cover fonctionne exactement comme un background-size: cover. Le souci peut se trouver au niveau de l’image, où celle-ci peut ne pas être positionnée comme on le souhaite. Comme vous vous en doutez peut-être, il existe une autre propriété permettant de contrôler la position de l’image que l’on souhaite afficher : object-position.

Object-position

Object-position détermine l’alignement de l’élément au sein de son élément parent. C’est une propriété de type position, elle fonctionne exactement comme la propriété background-position et vient compléter la propriété object-fit.
Object-position prend donc soit des valeurs de position (bottom, left, center…), soit des unités de mesures (px, vw…) ou alors des pourcentages.
Reprenons l’exemple précédent en y ajoutant la propriété object-position :

Ces deux propriétés ne sont pas toutes récentes, elles sont donc bien supportées par les navigateurs, sauf un… il n’y a pas de mystère, Internet Explorer a fait l’impasse sur object-fit et object-position, cependant Edge, depuis sa version 16, le supporte partiellement (fonctionne uniquement sur les balises) :

https://caniuse.com/#feat=object-fit

 

L’algorithme d’object-fit permet de simplifier le rendu d’images ou de vidéos à dimensions variées. Cette propriété CSS n’est cependant pas une excuse pour faire l’impasse sur l’optimisation des tailles de fichiers médias, mais elle permet d’harmoniser plus facilement le design et la data.