यहाँ सीएसएस को उपयोग गरेर उत्तरदायी डिज़ाइन छवियों को जोडना छ
आजको लोकप्रिय र वेबसाइटहरु हेर्नुहोस् एक डिजाइन उपचार जसले तपाईंलाई हेर्ने निश्चित छ कि ठूलो, स्क्रिन-स्प्यानिङ पृष्ठभूमि छविहरू हो। यी तस्विरहरू थप्नका लागि एउटा चुनौती भनेको सबै भन्दा राम्रो अभ्यास हो जुन वेबसाईटले फरक पर्दाको आकार र उपकरणहरूमा जवाफ दिनुपर्दछ - जवाफदेही वेब डिजाइनको रुपमा चिनिन्छ।
तपाइँको वेबसाइटको लेआउट परिवर्तन र स्केल फरक पर्दा आकारको आकारबाट, यस पृष्ठभूमिमा छविहरूको आकार अनुसार तलको आकारमा पनि हुनुपर्छ।
वास्तवमा, यी "द्रव छविहरू" उत्तरदायी वेबसाइटहरू (एक तरल ग्रिड र मिडिया प्रश्नहरू) सँग कुञ्जी टुक्राहरू मध्ये एक हो। ती तीन टुक्राहरू सुरुदेखि उत्तरदायी वेब डिजाइनको स्टपल भएको हुनाले, तर यो सँधै उत्तरदायी ईनलाइन इमेजहरू एक साइटमा थप्न सजिलो भएको बेलामा (इनलाइन छविहरू ग्राफिक्स हुन् जुन HTML मार्कअपको भागको रूपमा कोडित गरिएका छन्) पृष्ठभूमि छविहरूको साथमा (जुन CSS पृष्ठभूमि गुणहरू प्रयोग गरेर पृष्ठमा स्टाइल गरिएको छ) ले लामो वेब डिजाइनर र अगाडि अन्त्य विकासकर्ताहरूलाई लामो चुनौती प्रदान गरेको छ। धन्यबाद, सीएसएसमा "पृष्ठभूमि आकार" गुणको थप यो सम्भव बनाइएको छ।
एक अलग लेख मा, म कवर छ कि कसरि सीएसएस 3 गुण पृष्ठभूमि आकार को खिडकियां मा खिंचाव को लागि खिंचाव को लागि, तर यस सम्पत्ति को लागि तैनाती को लागि एक बेहतर, अधिक उपयोगी तरीका पनि छ। यो गर्नका लागि हामी निम्न सम्पत्ति र मूल्य संयोजन प्रयोग गर्नेछौं:
पृष्ठभूमि आकार: आवरण;
आवरण कुञ्जीपाटी सम्पत्तिले ब्राउजरलाई छविलाई सञ्झ्याल फिट गर्न मापन गर्न बताउँछ, किन कि ठूलो वा सानो कि सञ्झ्याल कसरी हुन्छ। सम्पूर्ण स्क्रीन आवरण गर्न छविलाई मापन गरिएको छ, तर मूल अनुपात र पहलू अनुपात बरकरार राखिएको छ, छवि विकृत हुनबाट रोक्न।
छवि ठूलो रूपमा ठूलो रूपमा सञ्झ्यालमा राखिएको छ ताकि सम्पूर्ण विन्डो सतह घटाउँछ। यसको मतलब यो हो कि तपाईं आफ्नो पृष्ठ मा कुनै छवि या कुनै विरूपण मा कुनै रिक्त स्थान छैन, तर यो पनि स्क्रीन को पहलू अनुपात र प्रश्न मा छवि को आधार मा केहि छवि को त्रास हुन सक्छ। उदाहरणका लागि, छविको किनारा (वा माथि, तल, बायाँ, वा दाँया) छवि पृष्ठभूमिमा काट्ने हुनसक्छ, तपाईले पृष्ठभूमि-स्थानको सम्पत्तिको लागि कुन मानमा निर्भर गर्दछ। यदि तपाइँ "माथि बायाँ" को पृष्ठभूमिलाई तातो बनाउनुहुन्छ, छविमा कुनै अतिरिक्त त तल र दाँया पक्षहरू आउनेछ। यदि तपाइँ पृष्ठभूमि छवि केन्द्रित गर्नुहुन्छ भने, सबै पक्षहरू भन्दा बाहिर आउनेछ, तर त्यस पछि देखि धेरै फैलिएको छ, कुनै पनि पक्षमा असर कम सेवा हुनेछ।
पृष्ठभूमि आकारको कसरी प्रयोग गर्ने: आवरण;
तपाईंको पृष्ठभूमि छवि सिर्जना गर्दा, एकदम ठूलो छवि छान्नको लागि राम्रो विचार हो। जब ब्राउजरले छविको गुणस्तरमा प्रभावकारी असर बिना छविलाई सानो बनाउन सक्छ, जब ब्राउजरले छविको मूल आयाम भन्दा ठूलो आकारमा आकार गर्दछ, भिजुअल गुणस्तर घटाइनेछ, ब्लर्री र पिक्सेल हुने। यसका नकारात्मक पक्ष यो हो कि तपाईको पृष्ठले प्रदर्शनको हिट लिन्छ जब तपाइँ विशाल छविहरू सबै स्क्रिनहरूमा वितरित गर्दै हुनुहुन्छ।
जब तपाइँ यो गर्नुहुन्छ, डाउनलोड गति र वेब डिलिवरीका लागि ती छविहरू ठीक तरिकाले तयारी गर्नुहोस् । अन्तमा, तपाईंले ठूलो आकारको आकारको आकार र गुणस्तर र डाउनलोड गतिको लागि एक उचित फाइल आकार बीचको राम्रो माध्यम खोजी गर्न आवश्यक छ।
स्केलिंग पृष्ठभूमि छविहरू प्रयोग गर्ने सामान्य तरिका मध्ये एक हो जब तपाईं चाहानुहुन्छ कि छविको पृष्ठमा पूर्ण पृष्ठभूमि लिने हो भने कि त्यो पृष्ठ विस्तृत छ र डेस्कटप कम्प्यूटरमा धेरै सानो देखिन्छ र ह्यान्डहेल्डमा मोबाइलमा पठाइएको छ। उपकरणहरू।
तपाईंको वेब होस्टमा तपाईंको छवि अपलोड गर्नुहोस् र पृष्ठभूमि छविको रूपमा तपाइँको सीएसएसमा थप्नुहोस्:
पृष्ठभूमि-छवि: url (फायरवर्क-ओभर-wdw.jpg);
पृष्ठभूमि-दोहोरो: दोहोरो;
पृष्ठभूमि पद: केन्द्र केन्द्र;
पृष्ठभूमि अनुलग्नक: निश्चित;
पहिले उपर ब्राउजर ब्राउजर थप्नुहोस्:
-webkit-background-size: cover;
-मोज-पृष्ठभूमि आकार: आवरण;
-ओ-पृष्ठभूमि आकार: आवरण;
त्यसपछि CSS गुण थप गर्नुहोस्:
पृष्ठभूमि आकार: आवरण;
सूट विटिंग यन्त्रहरू फरक छविहरू प्रयोग गर्दै
जबकि डेस्कटप वा ल्याप्टप अनुभवको लागि उत्तरदायी डिजाइन महत्त्वपूर्ण छ, वेबमा पहुँच गर्न सक्ने उपकरणहरूको विभिन्न प्रकारका बढ्दो मात्रामा बढेको छ, र धेरै प्रकारको पर्दाको आकार आउँछ।
पहिले उल्लेख गरिएको रूपमा, एक स्मार्टफोनमा एक धेरै ठूलो उत्तरदायी पृष्ठभूमि छवि लोड गर्दै, उदाहरणका लागि, कुशल वा ब्यान्डविड्थ-होशियार डिजाइन छैन।
जान्नुहोस् कि तपाईं कसरी मिडिया क्वेरीहरू प्रयोग गर्न सक्नुहुन्छ कि छविहरू सेवा गर्न उपयुक्त छन् कि यन्त्रहरूमा उपयुक्त हुनेछ, तिनीहरू मा प्रदर्शन गरिनेछ र मोबाइल यन्त्रहरूसँग तपाईको वेबसाइटको अनुकूलताको सुधार गर्नुहोस्।
जेनिफियर क्रिन द्वारा मूल लेख। जेरेमी Girard 9/12/17 द्वारा संपादित