उत्तरदायी छवियां: सीएसएस ट्रिक्स जो समय बचाती हैं

यदि आप वेब विकास में लगे हुए हैं, तो इस बात की बहुत अधिक संभावना है कि आप दो राक्षसों से परिचित हैं, जिनकी चर्चा लेख में की जाएगी, जिसका अनुवाद आज हम प्रकाशित करते हैं। हम छवियों और समय सीमा के बारे में बात कर रहे हैं। कभी-कभी, किसी कारण से, चित्र उन पेज लेआउट के स्थानों में फिट नहीं होना चाहते हैं जो उनके लिए डिज़ाइन किए गए हैं, और आप इसे पता लगाने के लिए कई घंटे खर्च नहीं कर सकते हैं।



इस सामग्री के लेखक का कहना है कि वह अक्सर एक समान समस्या का सामना करते थे, और इन टकरावों ने उन्हें कुछ सिखाया। यहां वह छवि आकारों के प्रबंधन के लिए पांच दृष्टिकोणों के बारे में बात करना चाहता है जो उसे सबसे अधिक पसंद हैं।

दृष्टिकोण नंबर 1: पृष्ठभूमि-छवि

शुक्रवार। शाम के पाँच बज रहे थे। आपको तत्काल एक निश्चित पृष्ठ समाप्त करने की आवश्यकता है। सब कुछ तैयार है, एकमात्र समस्या चित्रों की है, जो किसी भी तरह से फिट नहीं हैं जहां उन्हें होना चाहिए। यदि आपके साथ ऐसा हुआ है - तो यहां एक जादू का उपकरण है जो आपकी मदद करेगा:

.myImg {  background-image: url("my-image.png");  background-size: cover; } 

परिचित लगता है? हम सबने एक बार ऐसा किया। क्या इसने आपको धोखाधड़ी का सुझाव दिया?

background गुणों का उपयोग करना बहुत उपयोगी है, वे बस वही करते हैं जो उनसे अपेक्षित है। हालांकि, यह याद रखने योग्य है कि उनका उपयोग केवल उन छवियों के लिए किया जाना चाहिए जो पृष्ठ की मुख्य सामग्री का हिस्सा नहीं हैं, उन चित्रों के लिए जो पाठ को प्रतिस्थापित करते हैं, और कुछ विशेष मामलों में ।

दृष्टिकोण # 2: ऑब्जेक्ट-फिट

क्या होगा यदि मैं कहता हूं कि object-fit संपत्ति <img> तत्वों पर लागू होती है? वैसे, यह वीडियो के साथ भी काम करता है।

 .myImg { object-fit: cover; width: 320px; height: 180px; } 

वह सब है। ध्यान दें कि object-fit संपत्ति को सेट करने के लिए सेट किया जा सकता contain ।

▍ओब्जेक्ट-फिट सपोर्ट

दुर्भाग्य से, object-fit IE में और सफारी के पुराने संस्करणों में काम नहीं करेगा, हालांकि, ऐसे मामलों के लिए एक पॉलीफिल है ।

यहाँ से ली गई समर्थन जानकारी यहाँ दी गई है ।


ऑब्जेक्ट-फिट डेस्कटॉप ब्राउज़र के लिए समर्थन

→ यहाँ ऑब्जेक्ट-फिट का उपयोग करके एक उदाहरण दिया गया है

दृष्टिकोण # 3: नेटफ्लिक्स का तरीका

हमने अभी जो बात की है वह दिलचस्प लग सकती है, लेकिन पुराने ब्राउज़रों में, पॉलीफ़िल के बिना, यह काम नहीं करेगा। यदि आपको कुछ सार्वभौमिक चाहिए, तो शायद अब हम जिस बारे में बात करने जा रहे हैं वह आपके लिए सही है। यह विधि, मेरे पसंदीदा में से एक, हर जगह काम करती है।

यह इस तथ्य में शामिल है कि छवि को मूल तत्व में रखा जाना चाहिए, जिसकी position संपत्ति relative में सेट की गई है, और padding संपत्ति प्रतिशत शब्दों में सेट की गई है। नतीजतन, छवि मूल तत्व के पूरे मुक्त क्षेत्र पर कब्जा कर लेगी। यह इस तरह दिखता है:

 .wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; } 

यहां आप सोच सकते हैं कि यह बहुत जटिल है। हालाँकि, इस तकनीक का अर्थ समझने के बाद, आपको पता चलता है कि यह बहुत सरल और सुविधाजनक है। इसके अलावा, इस तकनीक का व्यापक रूप से उपयोग किया जाता है , उदाहरण के लिए, नेटफ्लिक्स में।


वर्ग नामों पर एक नज़र डालें

→ यहाँ इस तकनीक के कार्यान्वयन का एक उदाहरण है

दृष्टिकोण संख्या 4: ऊंचाई

यहां, छवि के आकार को नियंत्रित करने के लिए, height: auto उपयोग करें height: auto संपत्ति, और, इसके अलावा, max-width संपत्ति। यह संभव है कि आप पहले से ही इस तकनीक को जानते हैं:

 img { height: auto; width: 100%; /*  max-width,     */ max-width: 720px; } 

यह दृष्टिकोण ज्यादातर मामलों में लागू होता है, जब आपका लेआउट बहुत जटिल नहीं होता है।

→ यहाँ एक उदाहरण है

# 5 दृष्टिकोण: छवि प्रबंधन और प्रदर्शन

"प्रदर्शन" से मेरा मतलब पृष्ठ लोडिंग समय से है। एक बड़ी छवि को लोड करने में बहुत लंबा समय लग सकता है, जिससे उपयोगकर्ता को यह आभास होता है कि आपके पृष्ठ धीमे हैं, खासकर यदि ये पृष्ठ मोबाइल उपकरणों पर देखे जाते हैं।

क्या आप जानते हैं कि आधुनिक ब्राउज़रों में आप पृष्ठ की चौड़ाई के आधार पर छवि स्रोत को बदल सकते हैं? यही कारण है कि srcset विशेषता srcset ।

HTML 5 टैग में समान विशेषताओं का उपयोग किया जा सकता है . , , <img> . , , <img> :

 <picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture> 

→ यहाँ एक उदाहरण है

परिणाम

संक्षेप में:

• यदि आपकी छवि पृष्ठ सामग्री का हिस्सा नहीं है, तो background-image उपयोग background-image ।
• यदि IE समर्थन आपको रुचि नहीं देता है, तो object-fit उपयोग करें।
• कस्टम padding साथ नेटफ्लिक्स आधारित कंटेनर तकनीक हर जगह काम करती है।
• ज्यादातर मामलों में, तस्वीरों के साथ समस्या को हल करने के लिए, यह height: auto का उपयोग करने के लिए पर्याप्त है height: auto सीएसएस में height: auto संपत्ति;
• यदि आप पृष्ठ लोडिंग समय कम करना चाहते हैं, तो मोबाइल उपकरणों पर छोटी छवियां डाउनलोड करने के लिए srcset विशेषता का उपयोग करें।

हमें उम्मीद है कि यहां चर्चा की गई छवियों के साथ काम करने का तरीका आपके लिए उपयोगी होगा।