Resizer un objet (image, video…) en CSS3 sans perdre son aspect-ratio

object-fit

L’aspect-ratio étant la proportion entre la hauteur ( height ) et la largeur d’un élément ( width ), l’objet pourra être une image, un vidéo ou n’importe quelle objet HTML5

L’object-fit est une propriété CSS3 qui va gérer comment un élément s’adapte à son contenant par rapport à sa largeur et longueur.

Il s’applique sur les images, vidéos et autre médias intégrables dans la structure du html5.
Concrètement object -fit nous permettra de recadrer une image en ayant le contrôle entier sur la façon dont il va s’étirer à l’intérieur de sa boîte.

La propriété object-fit peut avoir l’une de ces cinq valeurs:

  • fill : ceci est sa valeur par défaut, l’image va s’étendre sur l’ensemble de la zone sans prendre en compte son aspect ratio.
  • contain : va augmenter ou diminuer la taille de l’image pour remplir la totalité de son contenant tout en conservant son aspect ratio cependant aucune partie de l’image sera coupé et si nécessaire on laissera du vide sur les cotés.
  • cover : l’image remplira la hauteur et la largeur de sa boîte, en respectant son aspect-ratio mais on coupera une partie de l’image si nécessaire.
  • none : l’image va ignorer la hauteur et la largeur définie et conservera sa taille d’ origine.
  • Scale-down : la propriété va comparer la différence de rendu entre la propriété none et contain et ainsi permettre d’avoir le meilleur rendu.

Voilà un exemple concret pour comprendre objective-fit:

object-fit

Sur la seconde image l’aspect-ratio est respecté et on peut noter la différence avec l’image originale du fait qu’il s’étend de gauche à droite mais cependant les parties supérieure et inférieure de l’image sont coupées.

On notera que par défaut l’image est centré à l’intérieur de son contenant mais la propriété objective-fit a changé cette disposition.

Démo

La démo ci-dessous va illustrer le rendu avec les 5 différentes valeurs du propriété

See the Pen object-fit by Robin Rendle (@robinrendle) on CodePen.

Si le contenu de l’image ne remplit pas toute l’espace du zone alors on montrera l’arrière-plan de l’élément, en l’occurrence un fond gris clair.

Répondre