Bxslider Ayar Yüksekliği

Question

Bu yüzden bxslider kullanmaya başladım.

Ancak, kaydırıcının boyutunu ayarlama konusunda sorunlar yaşıyorum. Doğal olarak en büyük elementin (sanırım) yüksekliğini alır. Sabit bir yüksekliğe nasıl ayarlayabilirim, 200px?

Answer 1

Aşağıdaki css'yi ekleyebilirsiniz. Bu keman dışarı

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

Kontrol ..

Answer 2

bxslider Neden unsurları stil değil? Sarıcı için bir sabit yükseklik ayarlarsanız, taşma ve konumlandırmada sorun yaşayabilirsiniz.

Eğer kullanıyorsanız listeleri:

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

Answer 3

Sonra div 'ın CSS ayarlayarak bir div ile sararak öneriyoruz. Bxslider I & genişliğini miras aldığına inanıyorum. Bu yardımcı olur

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

Hope:

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

Buradan li 'ın buna göre ayarlayabilirsiniz.

Answer 4

Görüntülenen resmin yüksekliği ile ilgili tüm 3 unsurları ayarlamak zorunda olduğu ana konteyner, iç konteyner ve görüntüleri kendileri ... şöyle

şunlardır:

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

• Aşağıdakilere dikkat etmeliyim:
  bxSlider, malzemeyi duyarlı tutmak için% 100 genişlik kullanır, bu nedenle yüksekliği zorlayarak çarpık bir görüntü alabilirsiniz, bu nedenle, kaydırıcı e-boyutlu görüntüler (sadece yükseklik sorunu .. düzeltmek için)

• çözüm: Cep içinde (sadece bir öneri) bakıldığında
  kullanım medya sorguları farklı bir yükseklik ayarlama

Şansın en iyisi ...

Answer 5

Güncelleme!

http://jsfiddle.net/u62LR/

Sadece görüntü yüksekliğini ayarlamak ...

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

Answer 6

Ben Bu benim için çalışan bu satırların

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

}

Answer 7

ile ortalama ve sabit boyut çözüldü ve 'etmezsen Yanıt verme

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

Answer 8

saklamanızı sağlar Kullanmak istiyorum! Önemli sadece böyle yap

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