Utilitaires TailwindCSS pour `<img>`

TailwindCSS fournit plusieurs classes utilitaires pour travailler avec la balise <img>. Voici quelques-unes des plus couramment utilisées :

• object-contain : Cette classe règle l’image pour qu’elle s’adapte à son conteneur tout en conservant son rapport d’aspect. Elle réduira ou agrandira l’image si nécessaire pour s’assurer qu’elle s’insère dans le conteneur.
• object-cover : Cette classe règle l’image pour qu’elle couvre l’ensemble du conteneur tout en conservant son rapport d’aspect. Elle recadrera l’image ou la réduira si nécessaire pour garantir qu’elle couvre le conteneur.
• object-fill : Cette classe règle l’image pour remplir l’ensemble du conteneur, sans conserver son rapport d’aspect. Cela peut entraîner un étirement ou une compression de l’image pour qu’elle s’insère dans le conteneur.
• object-none : Cette classe règle l’image à sa taille naturelle, sans redimensionnement ni recadrage.
• object-center : Cette classe centre l’image horizontalement et verticalement dans son conteneur.
• object-left : Cette classe aligne l’image à gauche dans son conteneur.
• object-right : Cette classe aligne l’image à droite dans son conteneur.
• object-top : Cette classe aligne l’image en haut de son conteneur.
• object-bottom : Cette classe aligne l’image en bas de son conteneur.

Ces classes peuvent être utilisées en conjonction avec d’autres classes TailwindCSS pour encore plus de style à vos images, comme définir une largeur ou hauteur spécifique, ajouter des bordures ou des ombres, ou ajuster l’opacité.