Fini les images déformées avec CSS et object-fit 🖼️
La propriété CSS object-fit définit comment le contenu d’un élément remplacé doit s’adapter à son conteneur selon sa largeur et sa hauteur. 📐
Selon la valeur de propriété utilisée, l’élément peut être étiré, mis à l’échelle ou rogné.
Vous pouvez utiliser en complément la propriété object-position pour déterminer l’alignement de l’élément remplacé.
Tous les navigateurs récents sont à ce jour compatibles avec ces propriétés, excepté Internet Explorer bien-sûr (j’ai dit récent).
Il est aussi important de noter que object-fit n’est pas la solution à tous vos problèmes, une gestion des ratios et des tailles de vos images est tout aussi essentiel. (Pas besoin de 4k pour une miniature😉)
👋
Commentaires