Comment aligner des logos proprement en CSS sans les retoucher ?

Dans ce tuto CSS en vidéo, nous allons voir ensemble comment aligner des logos proprement grâce à la puissance du CSS.

Pour cela, nous prendrons pour exemple plusieurs logos de tailles et hauteurs différentes et de formats différents pour essayer de palier au plus de cas possibles.
Cette astuce vous permettra de contrôler l'affichage des logos sur votre site web, par exemple sur une partie "partenaires" qui serait administrable depuis un back office et où vous ne savez pas quels types de logos vont être envoyés par le client.

Au programme de ce tuto comment aligner proprement des logos en CSS?

Voici les notions que nous allons parcourir dans le cours : 

• Faire le tour des fichiers sources,
• Créer la structure HTML pour afficher les logos,
• Utiliser la propriété "flex" pour les aligner cote à cote,
• Choisir une largeur fixe,
• Faire en sorte de garder le bon ratio hauteur/largeur quoi qu'il arrive,
• Gérer le cas particulier des .jpg pour avoir une hauteur automatique,
• Encadrer chaque logo d'une box & les espacer les uns des autres,
• Rendre le tout responsive sur mobile/tablette,
• Cibler uniquement les fichiers de type .jpg en CSS,
• Supprimer le fond blanc des fichiers .jpg sans retoucher l'image dans un logiciel graphique,
• Inverser la couleur d'un SVG en appliquant un filtre CSS.

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du résultat final.

Les fichiers sources contenant les fichiers de départ ainsi que les fichiers finaux sont inclus avec le tuto.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrer des difficultés pendant ou après le visionnage de la vidéo.

Bon tuto !