पूर्ण चौड़ाई (ब्राउज़र का 100%) स्लाइडर के लिए उपयोग करने के लिए एक अच्छा मूल छवि आकार क्या है?

मैं एक वेबसाइट बना रहा हूं जिसमें एक पूर्ण चौड़ाई स्लाइडर शामिल है; ब्राउज़र विंडो का 100%। सीएसएस इसपूर्ण चौड़ाई (ब्राउज़र का 100%) स्लाइडर के लिए उपयोग करने के लिए एक अच्छा मूल छवि आकार क्या है?

.slider { 
width:100%; 
}

... जहां स्लाइडर के माता-पिता <body>, नहीं कुछ आवरण div है जैसा होगा।

मेरी दुविधा यह है कि यदि मैं 1600 पीएक्स चौड़ाई कहने की एक छवि का उपयोग करता हूं, और इसे सीएसएस का उपयोग करके 100% तक स्केल करता हूं तो यह किसी भी व्यक्ति के लिए ठीक होगा जो अधिकतम ब्राउज़र है (मॉनिटर चौड़ाई) 1600px से कम है क्योंकि छवि होगी नीचे नहीं बढ़ाया गया है (इस पल के लिए तस्वीर से मोबाइल/उत्तरदायी आकार के विचारों को छोड़कर) हालांकि एक बहुत बड़े मॉनीटर पर अधिकतम ब्राउज़र का उपयोग करने वाला कोई व्यक्ति उस छवि को घटाएगा और इस प्रकार यह थोड़ा अपमानित दिखाई देगा।

मैंने कुछ स्लाइडर्स की जांच की और वे aprox 2000px की छवि चौड़ाई का उपयोग कर रहे हैं, लेकिन क्या ऐसी चौड़ाई है जिसे मॉनीटर के बड़े प्रतिशत पर स्केल नहीं किया जाना चाहिए?

कृपया ध्यान दें: मैं नहीं हूँ सीएसएस, एक ग्रिड प्रणाली, ट्विटर बूटस्ट्रैप, एक संवेदनशील या अनुकूली साइट, एक 960px चौड़ाई वेबसाइट या कुछ भी है कि तरह के बारे में पूछ। न तो मैं एक स्लाइडर के बारे में बात कर रहा हूं जो वेबसाइट रैपर का 100% है। मैं बस एक स्लाइडर बनाने के लिए प्रयुक्त छवि फ़ाइल की पिक्सेल चौड़ाई के बारे में पूछ रहा हूं जो ब्राउज़र चौड़ाई का 100% स्केल किया गया है।

स्रोत

2012-06-25 byronyasgur

1920px पर्याप्त – SVS

1920px उच्चतम आप जाना चाहते हैं है। इसे स्क्रीन रिज़ॉल्यूशन आकार के लिए "हाई-एंड" माना जाता है, और कुछ भी उच्च ब्राउज़र ब्राउज़र को क्रियान्वित करेगा। जब तक आप अपनी स्लाइड चौड़ाई 100% पर सेट करते हैं, तब तक यह किसी समस्या के बिना 1920 के बाद उच्च रिज़ॉल्यूशन के स्क्रीन आकारों में समायोजित होगा। यह बहुत अधिक बैंडविड्थ लेने की समस्या को भी हल करेगा और आपके लोड समय को प्रभावित नहीं करेगा (जो आपकी साइट की कार्यक्षमता के लिए महत्वपूर्ण है)।

स्रोत

2012-06-25 17:34:31 Jeff

ऐसा लगता है जैसे मैंने सवाल नहीं पूछा - देखें मेरा संपादन – byronyasgur

आपके व्यापक उत्तर के लिए धन्यवाद लेकिन मुझे समझ में नहीं आ रहा है कि आप कॉलम क्यों डाल रहे हैं ... मुझे एक सीएसएस बिंदु दृश्य से चाहिए। कंटेनर {चौड़ाई: 100%} जहां कंटेनर के माता-पिता है ... मेरा प्रश्न पूरी तरह से उपयोग की गई छवि की पिक्सेल चौड़ाई से संबंधित है ... फिर माफ करना अगर मैंने यह स्पष्ट नहीं किया है। – byronyasgur

आप कॉलम जेनरेट करते हैं ताकि आपकी छवि गतिशील रूप से स्क्रीन आकार में समायोजित हो सके। आप अपनी स्लाइड कॉलम चौड़ाई के 100% होने के लिए सेट करेंगे। इसलिए यदि कोई स्क्रीन 960 पीएक्स है, तो आपकी छवि 16 कॉलम के आकार के लिए उत्पन्न होगी या यदि स्क्रीन 1060 पीएक्स है तो यह 18 कॉलम के आधार पर उत्पन्न करने के बारे में जानी जाएगी। "कॉलम" वास्तव में भौतिक ग्रिड का प्रतिनिधित्व नहीं करता है जिसे स्क्रीन पर किसी उपयोगकर्ता द्वारा देखा जा सकता है, बल्कि एक ग्रिड जो ब्राउजर कार्य करता है, प्रति स्क्रीन रिज़ॉल्यूशन पर एक विशिष्ट पृष्ठ पर सामग्री के आकार को आधार देने के लिए भाषा के लिए पुल का उपयोग करता है। यह एक उत्तरदायी वेब विकास विधि – Jeff

960px एक वेब पेज के किसी भी सामग्री क्षेत्र के लिए मानक पूर्ण चौड़ाई है जो पूरी तरह से एक पूर्ण ब्राउज़र विंडो में कोई ओवरफ़्लो नहीं है।

http://960.gs/

स्रोत

2012-06-25 17:30:10 JROB

क्या आप वाकई मेरे प्रश्न को समझते हैं? मैं 100% चौड़ाई स्लाइडर कर रहा हूं - ब्राउज़र विंडो का 100%। – byronyasgur

ठीक है जब तक आप इसे गतिशील रूप से नहीं करते हैं, यह जानने का कोई तरीका नहीं है कि 100% पिक्सेल में क्या है, क्योंकि हर कोई संकल्प अलग है। – JROB

हां, और माफ कीजिए मुझे लगता है कि मेरे प्रश्न ने "पूर्ण चौड़ाई" को स्पष्ट नहीं किया है। हां, मुझे पता है कि यह 100% होना चाहिए, मैं जो पूछ रहा हूं वह यह है कि कहां से शुरू करना है, या दूसरे शब्दों में सबसे अधिक संभावित अधिकतम चौड़ाई उपयोगकर्ता को उनके एजेंट को अधिकतम किया जाएगा; ताकि छवि को स्केल करने से बचने के लिए ... इसे एक और तरीके से पूछने के लिए एक भौतिक मॉनीटर चौड़ाई है जिसे हम आम तौर पर "जितना चौड़ा मानते हैं" – byronyasgur

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

यदि आप एक मॉनिटर और मोबाइल डिवाइस के रूप में एक अनुकूली साइट बनाना चाहते हैं, तो मैं केवल twitter bootstrap या कुछ इसी तरह का उपयोग करने की सलाह दे सकता हूं। आप ग्रिड सिस्टम का भी उपयोग कर सकते हैं, उदाहरण के लिए: designinfluences।

स्रोत

2012-06-25 17:44:55 Xella

मुझे लगता है कि आपका उत्तर, दूसरों की तरह (मेरे सर्वोत्तम प्रयासों के बावजूद) भ्रमित है एक वेबसाइट की मानक चौड़ाई के साथ मेरा सवाल। इसके बजाय, मैं सबसे बड़ी सामान्य स्क्रीनों के बारे में पूछ रहा हूं जो लोग विकसित करते हैं, न कि उत्तरदायी डिजाइन wrt, लेकिन जेपीईजी फ़ाइल की पिक्सेल चौड़ाई को स्लाइडर के साथ 100% ब्राउज़र में इस्तेमाल किया जाता है (जब एक बड़ी स्क्रीन पर अधिकतम किया जाता है)। यह उपयोगी नहीं है कि _ "मेरा मॉनिटर, उदाहरण के लिए, 2560x1440 का संकल्प है। कोई ** कोई इतना बड़ा साइट रिज़ॉल्यूशन ** नहीं बनाता है।" _ – byronyasgur

इसे पढ़ें, शायद यह और अधिक मदद करता है: http: // stackoverflow। कॉम/प्रश्न/456250/अनुशंसित-वेबसाइट-रिज़ॉल्यूशन-चौड़ाई और ऊंचाई – Xella

नहीं .. AFAICT यह वह नहीं है जो मैं बिल्कुल पूछ रहा हूं, यह प्रश्न मॉनीटर मंद के लिए सीएसएस को समायोजित करने के बारे में चर्चा की तरह लगता है - देखें इस विषय पर स्लाइडर, यह एक काफी आम दृश्य है, इस मामले में छवियों को 2100px से नीचे स्केल किया गया है, जिसका अर्थ यह है कि 2100px मॉनीटर से अधिक व्यापक होने पर थीम तोड़ जाएगी http://demo.udfrance.com/voltage/wordpress / – byronyasgur

वर्ष 2013 के स्क्रीन संकल्प के वैश्विक आंकड़ों के मुताबिक, 1920x1080 का प्रदर्शन आकार अन्य शीर्ष 10 लोकप्रिय वर्तमान स्क्रीन आकारों में चौथा एक है। यह अब तक मॉनीटर के लिए अंतिम उच्च परिभाषा प्रदर्शन भी है।

स्रोत

2014-01-02 21:25:19 Lightcoder

मुझे लगता है कि यह आपके लक्षित दर्शकों के आधार पर एक अधिक पसंद की पसंद है। ये आंकड़े आपको शिक्षित निर्णय लेने में मदद कर सकते हैं। http://www.w3schools.com/browsers/browsers_display.asp

स्रोत

2016-08-24 10:13:39

पूर्ण चौड़ाई (ब्राउज़र का 100%) स्लाइडर के लिए उपयोग करने के लिए एक अच्छा मूल छवि आकार क्या है?

उत्तर

संबंधित मुद्दे