Bxslider Réglage de la hauteur

Question

Donc, je viens de commencer à utiliser bxslider.

J'ai toutefois des problèmes pour régler la taille du curseur. Naturellement, cela prend la hauteur du plus gros élément (je pense). Comment puis-je le régler à une hauteur fixe, par exemple 200px?

Answer 1

Vous pouvez ajouter les css suivants.

.bx-wrapper, .bx-viewport {
    height: 200px !important; //provide height of slider
}

Découvrez ce violon .. bxslider

Answer 2

Pourquoi ne pas styliser les éléments? Si vous définissez une hauteur fixe pour le wrapper, vous pourriez avoir des problèmes de débordement et de positionnement.

Si vous utilisez des listes:

.bx-wrapper ul li { height: 200px; }

Answer 3

Vous devez définir les 3 éléments impliqués avec la hauteur de l'image affichée, à savoir le conteneur principal, le conteneur interne et les images elles-mêmes ...

ainsi:

.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}

• je devrais noter que:
  bxSlider utilise 100% de la largeur pour que le contenu reste réactif. Vous pouvez donc obtenir une image déformée en forçant la hauteur. C’est pourquoi vous devez afficher des images de taille réduite sur le curseur (pour résoudre le problème de hauteur, par exemple).

• solution:
  utiliser les requêtes des médias pour définir une hauteur différente lorsqu’il est visualisé sur le mobile (juste une suggestion)

bonne chance...

Answer 4

Cela a fonctionné pour moi et vous permet de rester réactif

    .bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}

Answer 5

J'ai résolu le centrage et fixé la taille avec ces lignes

.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;

}

Answer 6

Il suffit d'utiliser le max-height:

.bx-wrapper .bx-viewport{max-height: 657px;}

Answer 7

Je recommanderais de l'envelopper avec un div, puis d'ajuster le CSS de div. Je crois que Bxslider hérite de la hauteur et de la largeur. 

.yourDivClass{
    height:200px;
    width:200px;
}

À partir de là, vous pouvez ajuster les li en conséquence:

.yourDivClass li {
    background-color:green; //just to see the overflow if height & width isn't equal
}

J'espère que cela t'aides.

Answer 8

Si vous ne voulez pas utiliser! Important, faites comme ça

.bx-wrapper {
  height: 400px; //Just choose your height
  display: block;
  overflow: hidden;
 }

Answer 9

Mettre à jour!

http://jsfiddle.net/u62LR/

Il suffit de définir la hauteur de votre image ...

.bx-wrapper, .bx-viewport {
    height: [IMAGE HEIGHT] !important; 
}