Si vous avez une image sur votre site Web et que vous devez réduire la hauteur ou la largeur, que ferez-vous ? Vous allez probablement essayer de trouver le fichier image, l’ouvrir dans un logiciel de retouche d’image comme Photoshop ou Paint, réduire la taille de l’image et l’enregistrer à nouveau. Ou quelque chose comme ça. C’est une bonne solution si vous savez comment travailler avec des images. Mais il existe une solution encore plus simple !
La propriété Object-fit
Vous avez surement déjà utilisé la propriété « background-size: cover; », et bien voici comment on peut faire la même chose avec une image HTML (img).
object-fit: cover;Le contenu remplacé est dimensionné pour conserver ses proportions tout en remplissant la totalité de la zone de contenu de l’élément. Si le rapport d’aspect de l’objet ne correspond pas au rapport d’aspect de sa boîte, alors l’objet sera coupé pour s’adapter.