Afficher plusieurs logos dans des tailles équivalentes

Bonjour,

Je cherche une solution CSS pour attribuer à des logos une taille visuellement équivalente, malgré des proportions différentes.

Je m'explique : l'idée c'est de mettre en place une liste de logos d'une façon dynamique. En indiquant simplement max-height, un logo carré par exemple apparaît plus petit qu'un logo très allongé. Je cherche donc un style CSS que je peux attribuer aux logos et qui va faire en sorte que la taille d'affichage sera calculée pour que les logos aient la même taille "à l'oeil" malgré leurs proportions différentes.

Si je reprends l'exemple cité : un logo carré devra donc avoir une hauteur plus élevée qu'un logo allongé.

Quelqu'un connaît une solution à cette problématique ?

Bonjour,

N'indiquez que la largeur des logos et ne fixez pas d'hauteur ainsi le ratio reste le même.

Dans ce cas là, j'ai le même problème, mais avec avec la largeur : un logo carré s'afficherait du coup beaucoup plus grand qu'un logo allongé.

Il faudrait une solution qui crée un ratio "idéal" entre largeur et hauteur.

En gros c'est une galerie de logo qui doit être faite non ?

Tout à fait

Hum si tu joue pas responsive tu peux toujours définir une taille de div fixe genre 300*300 et mettre le logo dedans avec la propriété "contain" ( si je me trompe pas )

Sinon en responsive tu pourrais utiliser les grilles que tu auras créer comme largeur max et pour la hauteur je pense que si tu défini un pourcentage fixe ça devrais être bon.

Voila les conseils d'un débutant , prends l'avis de Greg aussi , il est très bon et explique clairement

Je ne suis pas optimiste pour faire cela en pure css.
Pour que les logos est la même taille à l'oeil, j'aurais tendance à dire qu'il faut qu'ils affichent la même surface.
Avec un peu de Javascript, on peut imposer le width dans l'attribut style de la balise <img> pour arriver à cela.
Quand j'ai été confronté à ce problème, j'ai préféré reprendre les logos avec un logiciel pour rendre les logos rectangulaires plus carrés. Généralement, il suffit juste de dpélacer un texte.

Merci pour vos retours. La solution avec le même ration ne résout pas le problème, comme il ne s'agit pas d'un ratio fixe. J'ai déjà creusé dans ce sens.

Par contre l'idée de calculer en Javascript la surface des logos a l'air intéressante ! Je vais voir ce qui est faisable.

Après comme le dit Bazooka, la seule manière d'équilibrer des logos est à l’œil, car cela dépend aussi de la nature de ces logos

Voici un exemple rapide avec à peu près la même surface.
Et dans le monde réel on a des cas bien pire:


Modifié par kustolovic (07 Jun 2018 - 13:46)