Discussion :

[Soundboy39]

Bonjour à toutes et tous !

Je ne pense pas que le titre soit suffisamment explicite alors voici ce que je voudrais faire :

Dans une liste d'image de type "vignette", il faut que chaque image soit à la même hauteur, pour ce faire je place chaque mage dans un conteneur dont la hauteur est fixé à 180px avec un overflow: hidden.
Grâce à çà toutes les vignettes sont à la même hauteur et les images ne débordent pas.

MAIS le problème c'est que cette méthode perd tout son intérêt lorsque la hauteur de l'image est inférieur à la largeur.
L'image étant en width: 100%; je me retrouve avec le même problème esthétique de différence de hauteur entre les vignettes.

J'ai essayé de mettre en place un système de compensation via augmentation de la largeur mais les données mesurées diffèrent énormément en fonction des navigateurs et de manière générale çà fonctionne mal.

Qui aurait sous le coude une combine ou un script pour régler mon problème ?

Merci d'avance pour votre aide et bonne journée !

[SylvainPV]

Tu as essayé min-height: 100%; min-width: 100%; ? Sinon il y a aussi background-size: cover;, mais ça implique de charger l'image en background via CSS.

[Amnael]

Pour moi pas besoin de Javascript, Il te suffit de mettre un identifiant à l'image et de modifier le css derrière.

Qqchose du style

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="#" id="image">

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#image{
width:180px;
}

En gros, tu forces chaque image à être au dimension de ton conteneur.