Notifications
Tout effacer

Recadrage d'images en CSS avec object-fit


Kamleu Noumi Emeric
Messages: 64
Admin
Début du sujet
Membre
A(ont) rejoint: il y a 10 ans

Une excellente recette CSS pour utiliser l'object-fit pour adapter une image dans un conteneur d'une certaine dimension tout en conservant son rapport d'aspect.

Pour faire simple, on veut juste recadrer une image en respectant le ratio des dimensions de l'image et sans distorsion de l'image.

Si on veut par exemple réduire cette image de dimensions 1200px de longueur et 674px de largeur en 600x337 px. Normalement on aura cette image compressé et avec des distorsions.

Mais avec object-fit on peut respecter les dimensions en respectant les ratio de l'image.

https://alligator.io/css/cropping-images-object-fit/

Balises du sujet