Vous avez déjà essayé de faire tenir une image dans une cards ? Et ça a été un casse-tête ? Heureusement, une propriété bien pratique en css existe, la propriété object-fit, qui définit la façon dont le contenu d’un élément s’adapte à son conteneur en utilisant sa largeur et sa hauteur.
Une image est une matrice de couleur qui a deux propriétés: une largeur et une hauteur. Pour afficher une image tel qu’elle est, l’aire d’affichage doit avoir le même rapport hauteur/largeur, sinon l’image doit subir des modification pour couvrir tout l’espace.
En CSS la propriété qui permet de gérer ce comportement est object-fit. Elle prend en compte les valeur suivants:
- fill: C’est la valeur par défaut. L’image vas occuper la totalité de l’espace. Elle sera étirée ou écrasée si le rapport hauteur/largeur est différent.
- contain: L’image vas occuper le maximum d’espace sans modifier le rapport hauteur/largeur. Des espaces vide apparaîtront si le rapport hauteur/largeur est différent.
- cover: L’image vas occuper la totalité de l’espace sans modifier le rapport hauteur/largeur. Une partie de l’image sera coupée si le rapport est différent.
- none: L’image ne subit aucune modification. Si l’aire est plus petit que l’image elle se comporte comme cover.
- scale-down: Si l’aire est plus grand que l’image, elle se comporte comme none. Sinon, elle se comporte comme contain.
On vas appliquer ces propriété sur cette image 256*128 avec un aire de 128*256.
width: 128px;
height: 256px;
object-fit: fill;
width: 128px;
height: 256px;
object-fit: contain;
width: 128px;
height: 256px;
object-fit: cover;
Pour aller plus loin, je vous invite à consulter la page consacrée à cette propriété CSS et à ses valeurs sur la doc de la fondation Mozilla : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit