DIY मीडिया होम लोगो

अपनी खुद की होम थिएटर और हाय-Fi सेटअप डिजाइन और बनाने के लिए परम साइट.

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

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

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

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

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

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

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

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

ऊंचाईचौड़ाईबनाने के लिए छविComments
4:316:1016:9
2160288038402400×38404कश्मीर UHD
1600
1536
1440

2048
1920
2560



2560
1600×2560
1200
1080
1050
1600
1440
1400
1920

1680

1920
1200×1920पूर्ण HD 1080p
960
900
1280
1200
1536
1440

1600
1000×1600
800
768
720

1024
960
1280



1280
800×1280720पी
600
576
800
768
960

1024
640×1024
480640768480×768

आप देख सकते हैं मैं काफी कुछ प्रस्तावों वर्गीकृत किया है और फिर कर देगा 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); }}
}

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

उत्तर छोड़ दें