0वेबसाइटों के लिए उत्तरदायी पृष्ठभूमि छवियों

मैं हाल ही में मेरी वेबसाइटों और वेब सर्वर को अद्यतन करने के लिए किया गया है और एक नई साइट को जोड़ने (LoveCrete.org). मैं LoveCrete पर एक पृष्ठभूमि छवि करना चाहते थे और महसूस किया कि निश्चित रूप से 1 आकार सभी स्क्रीन फिट नहीं करता है. यहाँ का सार है क्या मेरी सोच थी और क्या मैं कई स्क्रीन आकार और झुकाव के लिए पूरा करने के लिए किया था.

कौन सा उन्मुखीकरण

मैं अपने आप को सब से पर इस्तेमाल आम प्रस्तावों एक छोटे से टेबल बनाने के द्वारा शुरू किया पीसी और गोलियों (क्षैतिज अभिविन्यास में). मैं इस पर ध्यान केंद्रित करने, क्योंकि अधिकांश छवियों परिदृश्य में उपलब्ध हैं तो यह एक समझदार जगह शुरू करने के लिए है का फैसला किया.

मैंने तय कर लिया है कि मैं छवियों केन्द्र पृष्ठ पर जगह है और किनारों कुछ उदाहरणों में स्क्रीन के किनारे खो दिया जा दिया जाएगा. एक फोन पोर्ट्रेट ओरिएंटेशन में प्रयोग किया जाता है जब यह ऊंचाई के आधार पर छवि लोड होगा (नहीं चौड़ाई) और छवि के दोनों किनारे से एक बहुत खो देंगे. यह किसी अन्य तरीके से कर एक पूरी तरह से अलग आकार के लिए क्रॉप छवियों की आवश्यकता होगी, या एक परिदृश्य छवि वाले का मतलब होगा “टाइल” एक लंबा स्क्रीन पर, जो वांछनीय नहीं है.

अधिकतम आकार छवि के अनुपात प्रत्येक समूह में बनाने के लिए चारों ओर थे 1.6 कुछ एक सा उच्च के साथ. बातें सरल रखने के लिए मैं के अनुपात का उपयोग करने का निर्णय लिया 16:10 सभी छवियों के लिए और आकार के हिसाब से बनाने के लिए के साथ आया था.

इस का मतलब है ज्यादातर मामलों में छवि स्क्रीन आकार के लिए एक सही फिट नहीं होगा, लेकिन सभी स्क्रीन कुछ बहुत करीब हो जाएगा और कोई स्क्रीन कुछ बहुत छोटा के साथ खत्म हो जाएगा. इसका यह भी मतलब एक स्रोत छवि के लिए क्रॉप किया जा सकता है 16:10 एक बार और फिर कई आकारों आसानी से बनाया

आम परिदृश्य संकल्प समूहों

आप देख सकते हैं मैं काफी कुछ प्रस्तावों वर्गीकृत किया है और फिर कर देगा 1 छवि है कि सभी ऊंचाइयों उस समूह में सबसे बड़ा ऊंचाई तक को कवर किया जाएगा. मुझे यकीन है कि छवि एक सामान्य स्क्रीन पर के साथ रखा जा सकता है इस तरह के एक ऊंचाई चौड़ाई अधिकतम के लिए विस्तृत पर्याप्त भी है कर देगा. मैं की तरह असामान्य विन्यास के कारण नहीं किया है 21:9 पर नज़र रखता है या एकाधिक स्क्रीन – वहाँ एक सीमा कहीं हो गया है!

इसलिये सीएसएस व्यूपोर्ट या ब्राउज़र आकार का उपयोग करता है और स्क्रीन आकार परिदृश्य स्क्रीन ऊंचाई के बजाय चौड़ाई का उपयोग करने की आवश्यकता है – सबसे सिस्टम पर के रूप में ऊपर और शीर्षक के लिए नीचे खो अंतरिक्ष सलाखों आदि जबकि चौड़ाई आमतौर पर बड़ा किया गया है. हालांकि, चित्र प्रदर्शित करता है के लिए यह ऊंचाई संपत्ति का उपयोग करने के लिए बेहतर है. यह के रूप में किया जा सकता है सीएसएस स्क्रीन अभिविन्यास पहचान कर सकते हैं

The सीएसएस इस्तेमाल किया तो इस प्रकार लग रहा है

तन{पृष्ठभूमि दोहराएँ: कोई दोहराने; पृष्ठभूमि संलग्न: स्थिर; पृष्ठभूमि स्थिति: केंद्र केंद्र; पृष्ठभूमि आकार: आवरण;}

@media (अधिकतम चौड़ाई: 768पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg480.jpg); }}
@media (न्यूनतम-चौड़ाई:769पिक्सल) तथा (अधिकतम चौड़ाई: 1024पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg640.jpg); }}
@media (न्यूनतम-चौड़ाई:1025पिक्सल) तथा (अधिकतम चौड़ाई: 1280पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg800.jpg); }}
@media (न्यूनतम-चौड़ाई:1281पिक्सल) तथा (अधिकतम चौड़ाई: 1600पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1000.jpg); }}
@media (न्यूनतम-चौड़ाई:1601पिक्सल) तथा (अधिकतम चौड़ाई: 1920पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1200.jpg); }}
@media (न्यूनतम-चौड़ाई:1921पिक्सल) तथा (अधिकतम चौड़ाई: 2560पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1600.jpg); }}
@media (न्यूनतम-चौड़ाई:2561पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(../छवियों / bg2400.jpg); }}

@media (उन्मुखीकरण: चित्र){
@media (अधिकतम ऊँचाई: 480पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg480.jpg); }}
@media (मिनट-ऊंचाई:481पिक्सल) तथा (अधिकतम ऊँचाई: 640पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg640.jpg); }}
@media (मिनट-ऊंचाई:641पिक्सल) तथा (अधिकतम ऊँचाई: 800पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg800.jpg); }}
@media (मिनट-ऊंचाई:801पिक्सल) तथा (अधिकतम ऊँचाई: 1000पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1000.jpg); }}
@media (मिनट-ऊंचाई:1001पिक्सल) तथा (अधिकतम ऊँचाई: 1200पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1200.jpg); }}
@media (मिनट-ऊंचाई:1201पिक्सल) तथा (अधिकतम ऊँचाई: 1600पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1600.jpg); }}
@media (मिनट-ऊंचाई:1601पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg2400.jpg); }}
}

अपना खुद का कुछ विचार मिल गया? अपने आप को टिप्पणी करके नीचे लिप्त! आप सदस्यता के लिए चाहते हैं, तो ऊपर दाईं ओर मेनू पर लिंक का उपयोग करें सदस्यता लें. आप नीचे दिए गए सामाजिक लिंक का उपयोग करके अपने दोस्तों के साथ इस साझा कर सकते हैं. चियर्स.