Astuce 006

Astuce 006

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😉)

👋

Partager
Haut de page