Comment lister les pouces qui ont des images de différentes tailles
J'ai besoin d'aide, de vos opinions et des options dont je dispose pour résoudre mon problème. Actuellement, je travaille sur un site Web qui a une vue Thumb et je ne suis pas satisfait de la façon dont les éléments sont affichés, j'ai quelque chose comme ceci:
Donc, le vrai problème auquel je suis confronté, c'est que les images chargées à l'intérieur de chacun des pouces peuvent varier leurs tailles, il y a des images plus hautes plus larges, j'ai donc décidé de centrer chacune d'elles à l'intérieur du pouce, de cette manière:
- Les images dont la hauteur était supérieure à la largeur I centrée sur l'axe X
- Les images dont la hauteur était mineure que la largeur I centrée sur l'axe Y
Je l'ai fait de cette façon pour montrer à l'utilisateur l'image correctement et non zoomée ou coupée, mais maintenant les pouces sont vraiment moche, la vue peut par exemple ressembler à ceci:
La taille des images est une chose que je ne peux pas gérer car je les obtiens de façon dynamique de certains services. Pour être plus précis, c'est une capture de la liste dans le site:
L'espace supérieur et inférieur entre les images est dû à la taille de la division du pouce, donc il laisse cet espace que je n'aime vraiment pas, lorsque l'utilisateur survole les pouces 2 boutons sont affichés, j'ai donc besoin que le pouce soit à au moins le plus haut pour les afficher (cela pourrait être plus problématique avec les images trop larges). Alors, quelles sont les recommandations pour améliorer l'interface utilisateur/UX de cette liste? Merci beaucoup à l'avance!
Vous pouvez soit vous débarrasser du pouce extérieur div, soit le dimensionner à la même taille que l'image réelle et mettre un peu de rembourrage autour, puis utiliser un motif de grille fluide , appelez parfois une disposition de maçonnerie .
Voici une source pour cela en CSS: