उत्तरदायी पूर्ण-चौड़ाई cssSlider - ब्रेकपॉइंट तक ऊंचाई रखें

Question

मैं www.cssslider.com पर cssSlider का लाइसेंस खरीदना चाहता हूं, लेकिन मुझे इसे पहले काम करने की आवश्यकता है।

मुझे एक उत्तरदायी पूर्ण चौड़ाई स्लाइडर चाहिए। चूंकि ब्राउजर विंडो चौड़ाई में घट जाती है, इसलिए मैं पहले स्लाइडर ऊंचाई को बरकरार रखना चाहता हूं (इसलिए स्लाइडर छवि के किनारे ही कट जाएंगे)। एक निश्चित ब्रेकपॉइंट के बाद (जब ब्राउज़र विंडो में मेरी साइट पर सामग्री रैपर की चौड़ाई के समान चौड़ाई होती है), तो केवल तभी मैं स्लाइडर को छोटे लंबवत रूप से प्राप्त करना चाहता हूं। इस तरह, स्लाइडर छोटे उपकरणों पर हास्यास्पद रूप से पतला नहीं होगा। मुझे उम्मीद है कि मैं खुद को अच्छी तरह समझाऊंगा।

मैं 1120 x 500 की चौड़ाई के साथ एक पारदर्शी .gif का उपयोग कर, पृष्ठभूमि के रूप में इस्तेमाल एक ही छवि के साथ अपनी साइट पर ऐसा करने में कामयाब रहे: https://www.easterisland.travel/

मैं जानता हूँ कि यह cssSlider साथ संभव है, क्योंकि वे इस राशि उनके पहले पृष्ठ शीर्ष स्लाइडर (http://cssslider.com/) पर सुविधा, लेकिन cssSlider निष्पादन योग्य प्रोग्राम के साथ इसे चुनने का कोई विकल्प नहीं है।

कोई सुराग? धन्यवाद!

Answer 1

अंत में, मैं यह सही कोड होना पाया:

@media only screen and (max-width: 1500px) { 
    .csslider1, 
    .csslider1 > ul { 
     height: auto; 
    } 
} 

मैं cssSlider प्रोग्राम स्वचालित रूप से उत्पन्न करने के लिए मिला व्यवहार मैं सही सेटिंग्स के साथ देख रहा था। आपको बस इतना करना है कि आप "पूर्ण चौड़ाई" की जांच के साथ छवि चौड़ाई के रूप में इच्छित ब्रेकपॉइंट को रखना चाहते हैं।

Answer 2

छोटी स्क्रीन के लिए, उन्होंने कंटेनर ऊंचाई को मीडिया क्वेरी के अंदर ऑटो पर सेट किया। फिर वे स्क्रीन चौड़ाई के आधार पर विभिन्न छवियों की सेवा करते हैं। तो यह 'उत्तरदायी छवियों' की तरह दिखता है।

उत्तरदायी छवियों पर कि क्या आप IE, अपने सर्वर विन्यास के बारे में परवाह निर्भर करता है जटिल हो सकता है, और क्या आप php या जावास्क्रिप्ट, आदि आदि पता यहाँ कुछ जानकारी है: https://css-tricks.com/which-responsive-images-solution-should-you-use/

वैकल्पिक समाधान: आप नए css3 इस्तेमाल कर सकते हैं वीडब्ल्यू और वीएच की इकाइयां।
vw और vh व्यूपोर्ट का प्रतिशत हैं। इसके लिए ब्राउज़र समर्थन लगभग सीएसएस 3 स्लाइडर के समर्थन के बराबर होगा, इसलिए आपको ठीक होना चाहिए!

कोशिश उनके मीडिया क्वेरी की जगह, कुछ इस तरह:

@media only screen and (max-width: 800px) { 
    .csslider1, .csslider1 > ul { 
     height: 75vh; max-height:450px; 
    } 
}