Bxslider सेटिंग ऊंचाई

Question

तो मैंने बस bxslider का उपयोग शुरू किया।

हालांकि मुझे स्लाइडर के आकार को स्थापित करने में समस्याएं आ रही हैं। स्वाभाविक रूप से यह सबसे बड़ा तत्व (मुझे लगता है) की ऊंचाई लेता है। 200px कहें, मैं इसे एक निश्चित ऊंचाई पर कैसे सेट करूं?

Answer 1

आप निम्नलिखित सीएसएस जोड़ सकते हैं।

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

इस बेला बाहर की जाँच करें .. bxslider

Answer 2

तत्वों क्यों शैली नहीं दे? यदि आप रैपर के लिए एक निश्चित ऊंचाई निर्धारित करते हैं तो आप अतिप्रवाह और स्थिति के साथ परेशानी में पड़ सकते हैं।

आप उपयोग कर रहे हैं सूचियां:

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

Answer 3

मैं एक div तो div के सीएसएस का समायोजन के साथ लपेटकर की सिफारिश करेंगे। Bxslider मुझे विश्वास है कि ऊंचाई & चौड़ाई विरासत में है।

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

आशा इस मदद करता है:

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

यहाँ से आप li के अनुसार समायोजित कर सकते हैं।

Answer 4

आप छवि प्रदर्शित की ऊंचाई के साथ शामिल सभी 3 तत्वों निर्धारित करने की आवश्यकता है जो मुख्य कंटेनर, भीतरी कंटेनर और छवियों के लिए खुद को ...

इसलिए की तरह हैं:

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

• मुझे ध्यान रखना चाहिए कि:
  bxSlider सामग्री को उत्तरदायी रखने के लिए 100% चौड़ाई का उपयोग करता है ताकि आपको ऊंचाई को मजबूर कर विकृत छवि मिल सके, और यही कारण है कि आपको पीआर की सेवा करने की आवश्यकता है ई-आकार वाली छवियां स्लाइडर को (सिर्फ ऊंचाई मुद्दा .. ठीक करने के लिए)

• समाधान:
  उपयोग मीडिया क्वेरी एक अलग ऊंचाई (केवल एक सुझाव) मोबाइल में जब देखी स्थापित करने के लिए

शुभकामनाएं ...

Answer 5

अद्यतन!

http://jsfiddle.net/u62LR/

बस अपनी छवि ऊंचाई सेट ...

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

Answer 6

मैं केंद्रित और इन पंक्तियों के

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

}

Answer 7

यह मेरे लिए काम किया साथ निश्चित आकार का हल है, और आप जवाबदेही रखने के लिए

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

Answer 8

आप डॉन हैं 'की अनुमति देता है टी उपयोग करना चाहते हैं! महत्वपूर्ण यह सिर्फ

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