Affichage d'image portrait/paysage dans les carousels

Bonjour à tous,

je suis confronté à un problème, j'ai des images format portrait et paysage dans des galleries, jusque là rien d'anormal.
Mais lorsque je tente d'utiliser des carousel avec jquery, ils calculent la taille du conteneur (wrap) en fonction de la largeur de la première image et là ... bouf c'est le bordel .
Si la première est un portrait, les paysages s'affichent mal, etc.

Je cherche un moyen d'afficher les images dans un wrapper carré (ce qui solutionnerait le problème). Mais je ne vois pas comment faire.
Quelqu'un a-t-il une piste ?

Merci,
Stéphane

Salut,

Avec les informations que tu fournis, j'avoue ne pas comprendre entièrement ton problème.

Quand on utilise un carousel (ou n'importe quel JS qui fait défiler du contenu), une bonne pratique (indispensable au bon fonctionnement de l'outil) consiste à fixer les dimensions des éléments qui contiennent les contenus (généralement des <li>).

La taille, c'est toi qui la fixe. Que l'image soit en portrait ou en paysage, elle doit bien respecter une largeur et une hauteur maximum, non ?

Combien d'images veux-tu faire défiler à la fois ?

Bon je vais préciser,
je récupère des images en base de données (au hasard dans ma photothèque) et je désire les afficher dans un carousel.
Certaines images font imaginons 120px sur 240px et d'autres 240px sur 120px.
Le wrappeur est calculé sur la largeur :
imaginons que ce soit une paysage : 240px et hop l'image suivante est affichée dans les 240 mais elle fait 120px de large (portrait) -> avec un décalage pour pas afficher l'image précédente du carousel ; les deux images sont découpées à cause du décalage dont le calcul n'est pas juste (largeur différente de l'image courante et de la première image qu'on a voulu affiché), etc ...

Essayes n'importe quel carousel jquery et mets-y des paysages et des portraits, tu verras ...
:p

focales a écrit :
Essayes n'importe quel carousel jquery et mets-y des paysages et des portraits, tu verras ...

T'as pas dû bien lire mon post.

Dans ton cas il faudrait fixer width et height du <li> à 240px (laisse de côté le centrage vertical / horizontal de l'image).

Une page en ligne avec ces modifications pour me prouver que j'ai tort ?

Euh je pense que c'est toi qui n'a pas bien lu

Les images sont enveloppées dans un wrapper dont la largeur est calculée au run-time ...
Et il calcule sur la première donc même si je fixe la largeur, celle du wrapper elle varie !

Damn... qu'il est têtu.

Tu veux parier un TUC que j'ai raison ?

css (je t'ai pas attendu pour mettre des dimensions à mes images ...)

div.aroundTV
{

  float: right;
  background: url(../images/template1/TV.png) no-repeat;
  
  height: 240px;
  width: 250px;
  margin-right: 40px;


  padding: 10px 10px 10px 10px;
}
ul#TV1, ul#TV2, ul#TV3, .bx_wrap
{
  height: 200px;
  width: 200px;

}
div.aroundTV img
{
  max-height: 150px;
  max-width: 150px;
}

et pourtant regarde la largeur du wrapper sur l'image ci-dessous ...

Dans le code CSS que tu donnes, je ne vois aucune dimension fixée sur le <li>.

La preuve que si tu avais compris où je voulais en venir, ça nous aurait évité de perdre du temps...

hello,
tu peux mettre ton truc en ligne stp

Désolé mais mon wrapper, même avec ta solution coupe l'image ...
Mais l'image semble plus ou moins au bon endroit juste décalée...
Je pense que ta solution est bonne mais que j'ai quelque part ailleurs une merde dans le css.
Je continue à chercher

Stéphane

Salut,

C'est peut être le bon moment pour fournir idéalement une page en ligne ou au moins l'intégralité de tes codes, de manière à permettre de cibler plus précisément le problème et être en mesure de pouvoir t'aider. Sinon la discussion risque d'être allongée pour rien et de faire perdre du temps inutilement.