Wysokość ustawienia Bxslider

Question

Więc właśnie zacząłem używać bxslider.

Mam jednak problemy z ustawianiem rozmiaru suwaka. Oczywiście zajmuje ona wysokość największego elementu (chyba). Jak ustawić go na stałą wysokość, powiedzmy 200px?

Answer 1

Możesz dodać następujące css.

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

Sprawdź to ryba .. bxslider

Answer 2

Dlaczego nie projektować elementy? Jeśli ustawisz wysokość opakowania, możesz mieć kłopoty z przepełnieniem i pozycjonowaniem.

Jeśli używasz list:

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

Answer 3

bym zalecane owijając go z div następnie dostosowując CSS div „s. Bxslider Wierzę, że dziedziczy szerokość & szerokości.

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

Stąd można dostosować li „s odpowiednio: nadzieja

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

to pomaga.

Answer 4

trzeba ustawić wszystkie 3 elementy związane z wysokością obrazu wyświetlanego które są głównym pojemnik, pojemnik wewnętrzny i same obrazy ...

tak:

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

• Muszę zauważyć, że:
  bxSlider używa 100% szerokości, aby zachować dobrą reakcję, dzięki czemu obraz może zostać zniekształcony przez wymuszenie wysokości, dlatego należy podać pr e wielkości zdjęć do suwaka (wystarczy, aby rozwiązać problem wysokość ..)

• rozwiązanie:
  użyć kwerendy multimedialne ustawić różną wysokość, patrząc w telefonii komórkowej (tylko sugestia)

powodzenia ...

Answer 5

Aktualizacja!

http://jsfiddle.net/u62LR/

Wystarczy ustawić wysokość obrazu ...

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

Answer 6

Rozwiązałem centrowania i stałym rozmiarze z tych linii

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

}

Answer 7

ten pracował dla mnie, i pozwala zachować zdolność reagowania

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

Answer 8

Jeśli don” t chcesz używać! ważne po prostu zrób tak, jak to

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