यहां सीएसएस का उपयोग कर उत्तरदायी डिजाइन छवियों को जोड़ने का तरीका बताया गया है
लोकप्रिय वेबसाइटों को आज देखें और एक डिज़ाइन उपचार जिसे आप देखना चाहते हैं वह बड़ी, स्क्रीन-स्पैनिंग पृष्ठभूमि छवियां है। इन छवियों को जोड़ने के साथ चुनौतियों में से एक सबसे अच्छा अभ्यास है कि वेबसाइटों को विभिन्न स्क्रीन आकारों और उपकरणों का जवाब देना चाहिए - एक दृष्टिकोण जो उत्तरदायी वेब डिज़ाइन के रूप में जाना जाता है।
चूंकि आपकी वेबसाइट का लेआउट अलग-अलग स्क्रीन आकारों के साथ बदलता है और स्केल करता है, इसलिए इन पृष्ठभूमि छवियों को तदनुसार उनके आकार को स्केल करना चाहिए।
वास्तव में, ये "द्रव छवियां" उत्तरदायी वेबसाइटों (तरल पदार्थ ग्रिड और मीडिया प्रश्नों के साथ) के प्रमुख टुकड़ों में से एक हैं। शुरुआत के बाद से ये तीन टुकड़े उत्तरदायी वेब डिज़ाइन का मुख्य हिस्सा हैं, लेकिन जब भी साइट पर उत्तरदायी इनलाइन छवियों को जोड़ने में काफी आसान रहा है (इनलाइन छवियां वे ग्राफिक्स हैं जिन्हें HTML मार्कअप के हिस्से के रूप में कोड किया गया है) पृष्ठभूमि छवियों (जो सीएसएस पृष्ठभूमि गुणों का उपयोग कर पृष्ठ में स्टाइल किए गए हैं) के साथ ही कई वेब डिजाइनरों और फ्रंट एंड डेवलपर्स को एक महत्वपूर्ण चुनौती प्रदान की गई है। शुक्र है, सीएसएस में "पृष्ठभूमि आकार" संपत्ति के अतिरिक्त यह संभव बना दिया है।
एक अलग लेख में, मैंने खिड़की में फ़िट होने के लिए छवियों को फैलाने के लिए CSS3 प्रॉपर्टी पृष्ठभूमि आकार का उपयोग कैसे किया, लेकिन इस संपत्ति के लिए तैनात करने के लिए एक बेहतर, अधिक उपयोगी तरीका भी शामिल है। ऐसा करने के लिए, हम निम्नलिखित संपत्ति और मूल्य संयोजन का उपयोग करेंगे:
पृष्ठभूमि आकार: कवर;
कवर कीवर्ड प्रॉपर्टी ब्राउज़र को विंडो को फिट करने के लिए छवि को स्केल करने के लिए कहती है, भले ही खिड़की कितनी बड़ी या छोटी हो। छवि को पूरी स्क्रीन को कवर करने के लिए स्केल किया गया है, लेकिन मूल अनुपात और पहलू अनुपात को बरकरार रखा जाता है, जिससे छवि को विकृत होने से रोक दिया जाता है।
छवि को जितनी बड़ी हो सके खिड़की में रखा गया है ताकि पूरी खिड़की की सतह को कवर किया जा सके। इसका मतलब है कि आपके पास आपके पृष्ठ में कोई रिक्त स्थान नहीं होगा या छवि पर कोई विरूपण नहीं होगा, लेकिन इसका अर्थ यह भी है कि स्क्रीन के पहलू अनुपात और प्रश्न में छवि के आधार पर कुछ छवियों को छंटनी की जा सकती है। उदाहरण के लिए, छवियों के किनारों (या तो शीर्ष, नीचे, बाएं, या दाएं) छवियों पर काटा जा सकता है, इस पर निर्भर करता है कि आप पृष्ठभूमि-स्थिति संपत्ति के लिए किस मूल्य का उपयोग करते हैं। यदि आप पृष्ठभूमि को "शीर्ष बाएं" पर केंद्रित करते हैं, तो छवि पर कोई भी अतिरिक्त नीचे और दाएं किनारे से निकल जाएगा। यदि आप पृष्ठभूमि छवि को केंद्रित करते हैं, तो अतिरिक्त तरफ से बाहर आ जाएगा, लेकिन चूंकि वह अतिरिक्त फैल गया है, इसलिए किसी भी तरफ का प्रभाव कम सेवा करेगा।
पृष्ठभूमि आकार का उपयोग कैसे करें: कवर;
अपनी पृष्ठभूमि छवि बनाते समय, एक ऐसी छवि बनाने का अच्छा विचार है जो काफी बड़ा है। जबकि ब्राउज़र दृश्य गुणवत्ता पर ध्यान देने योग्य प्रभाव के बिना एक छवि को छोटा कर सकते हैं, जब कोई ब्राउज़र किसी छवि को उसके मूल आयामों से बड़े आकार में स्केल करता है, तो दृश्य गुणवत्ता खराब हो जाएगी, धुंधली और पिक्सलेटेड हो जाएगी। इसका नकारात्मक पक्ष यह है कि जब आप सभी स्क्रीन पर विशाल छवियां प्रदान कर रहे हों तो आपका पृष्ठ एक प्रदर्शन हिट लेता है।
जब आप ऐसा करते हैं, तो डाउनलोड छवियों और वेब डिलीवरी के लिए उन छवियों को ठीक से तैयार करना सुनिश्चित करें। अंत में, आपको एक बड़ी पर्याप्त छवि आकार और गुणवत्ता और डाउनलोड गति के लिए एक उचित फ़ाइल आकार के बीच खुश माध्यम खोजने की आवश्यकता है।
स्केलिंग पृष्ठभूमि छवियों का उपयोग करने के सामान्य तरीकों में से एक यह है कि जब आप उस छवि को किसी पृष्ठ की पूर्ण पृष्ठभूमि लेना चाहते हैं, चाहे वह पृष्ठ व्यापक हो और डेस्कटॉप कंप्यूटर पर देखा जा रहा हो या बहुत छोटा हो और उसे हाथ में भेजा जा रहा हो, मोबाइल उपकरण।
अपनी छवि को अपने वेब होस्ट पर अपलोड करें और पृष्ठभूमि छवि के रूप में इसे अपने सीएसएस में जोड़ें:
पृष्ठभूमि-छवि: यूआरएल (आतिशबाजी-ओवर-wdw.jpg);
पृष्ठभूमि दोहराना: दोहराना नहीं;
पृष्ठभूमि की स्थिति: केंद्र केंद्र;
पृष्ठभूमि-लगाव: तय;
पहले ब्राउज़र prefixed सीएसएस जोड़ें:
-webkit- पृष्ठभूमि आकार: कवर;
-मोज़-पृष्ठभूमि-आकार: कवर;
-ओ-पृष्ठभूमि आकार: कवर;
फिर सीएसएस संपत्ति जोड़ें:
पृष्ठभूमि आकार: कवर;
अलग-अलग छवियों का उपयोग करना जो सूट वेरींग डिवाइस हैं
जबकि डेस्कटॉप या लैपटॉप अनुभव के लिए उत्तरदायी डिज़ाइन महत्वपूर्ण है, वेब तक पहुंचने वाले उपकरणों की विविधता काफी बढ़ी है, और स्क्रीन आकारों की एक बड़ी विविधता इसके साथ आता है।
जैसा कि पहले उल्लेख किया गया है, एक स्मार्टफोन पर एक बहुत बड़ी उत्तरदायी पृष्ठभूमि छवि लोड करना, उदाहरण के लिए, एक कुशल या बैंडविड्थ-सचेत डिज़ाइन नहीं है।
जानें कि आप छवियों की सेवा के लिए मीडिया प्रश्नों का उपयोग कैसे कर सकते हैं जो उन डिवाइसों के लिए उपयुक्त होंगे, जिन्हें वे प्रदर्शित करेंगे, और मोबाइल उपकरणों के साथ आपकी वेबसाइट की संगतता में और सुधार करेंगे।
जेनफियर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड 9/12/17 द्वारा संपादित