एक प्रतिक्रियाशील छवि वह है जो स्क्रीन आकार की परवाह किए बिना, विभिन्न उपकरणों के लिए खुद को अनुकूलित कर सकती है। वेबसाइट पर प्रतिक्रियाशील छवि रखना आजकल बहुत महत्वपूर्ण हो गया है। क्योंकि यह न केवल वेबसाइट को गति देता है बल्कि सभी डिवाइसों पर एक अच्छा उपयोगकर्ता अनुभव भी प्रदान करता है। ब्राउज़र का आकार बदलने से प्रतिक्रियाशील छवियों का भी आकार बदल जाएगा।
प्रतिक्रियाशील छवियां विभिन्न उपकरणों पर विभिन्न स्क्रीन आकारों के लिए कुशलतापूर्वक अनुकूलित होती हैं। यह सुनिश्चित करता है कि गुणवत्ता बनी रहे। रिस्पॉन्सिव छवियों वाली एक रिस्पॉन्सिव वेबसाइट निश्चित रूप से जुड़ाव और रूपांतरण दरों को बढ़ाती है। मीडिया प्रश्नों के साथ-साथ सीएसएस का उपयोग करके छवियों को उत्तरदायी बनाया जा सकता है।
यह आलेख छवियों को प्रतिक्रियाशील बनाने के लिए HTML और CSS का उपयोग करेगा।
HTML और CSS के साथ इमेज को रिस्पॉन्सिव कैसे बनाएं?
HTML और CSS का उपयोग करके छवियों को प्रतिक्रियाशील बनाने के लिए, नीचे दिए गए चरणों का पालन करें:
विधि 1: 'अधिकतम-चौड़ाई' संपत्ति का उपयोग करें
किसी छवि को प्रतिक्रियाशील बनाने की पहली विधि 'का उपयोग करना है अधिकतम चौड़ाई ' संपत्ति। “ अधिकतम चौड़ाई '' संपत्ति का उपयोग छवि की अधिकतम चौड़ाई को परिभाषित करने के लिए किया जाता है। यदि सामग्री अधिकतम चौड़ाई से अधिक हो जाती है, तो यह तत्व की ऊंचाई बदल देगी।
HTML बनाएं
HTML के
टैग में एक छवि फ़ाइल जोड़ने के लिए, उपयोगकर्ताओं कोसीएसएस जोड़ें
अब, एक बाहरी सीएसएस फ़ाइल बनाएं और इसे “के साथ सेव करें।” सीएसएस ” फ़ाइल एक्सटेंशन, और इसे HTML फ़ाइल के
टैग के अंदर लिंक करें। CSS फ़ाइल में छवि फ़ाइल को स्टाइल करने के लिए, img टैग से प्रारंभ करें और घुंघराले ब्रेसिज़ खोलें। फिर, घुंघराले ब्रेस के अंदर, 'जोड़ें' अधिकतम-चौड़ाई: 100% ;' छवि को कंटेनर के भीतर क्षैतिज रूप से फिट करने के लिए। इसके अलावा, यह छवियों को कटने से रोकेगा। उसके बाद, जोड़ें ' ऊंचाई: ऑटो ;' ऊंचाई को स्वचालित रूप से समायोजित करने के लिए, ताकि छवि सही ढंग से प्रदर्शित हो:आईएमजी {
अधिकतम चौड़ाई : 100% ;
ऊंचाई : ऑटो ;
}
यह जांचने के लिए कि छवि का आकार कैसा है, ब्राउज़र विंडो का आकार बदलें।
विधि 2: 'चौड़ाई' संपत्ति का उपयोग करें
किसी छवि को प्रतिक्रियाशील बनाने का दूसरा तरीका संपत्ति का उपयोग करना है ' चौड़ाई ”। संपत्ति ' चौड़ाई ” छवियों और पाठ के लिए चौड़ाई को परिभाषित करता है। इसमें मार्जिन, पैडिंग या बॉर्डर नहीं हैं। यह इमेज और टेक्स्ट का आकार cm, px, या % के रूप में सेट कर सकता है। किसी छवि को प्रतिक्रियाशील बनाने के लिए, बस ' असाइन करें चौड़ाई 'संपत्ति को' 100 %'। सेटिंग ' चौड़ाई: 100% ;' इसका मतलब है कि छवि को मूल तत्व जितना बड़ा बनाएं:
आईएमजी {चौड़ाई : 100% ;
ऊंचाई : ऑटो ; }
उपरोक्त पुष्टि करता है कि छवि प्रतिक्रियाशील है। यह जांचने के लिए कि यह प्रतिक्रियाशील है या नहीं, बस ब्राउज़र विंडो का आकार बदलें।
विधि 3: मीडिया क्वेरीज़ लागू करें
सीएसएस मीडिया क्वेरीज़ उपयोगकर्ताओं को वेब पेज के स्वरूप को संशोधित करने में मदद करती हैं। सीएसएस मीडिया क्वेरी में शर्तें शामिल हैं, जब भी ये शर्तें पूरी होंगी, यह डिवाइस या ब्राउज़र का स्वरूप बदल देगी। मीडिया क्वेरीज़ उपयोगकर्ताओं को छवियों को प्रतिक्रियाशील बनाने में भी मदद कर सकती हैं। इस कारण से, सबसे पहले, “@” निर्दिष्ट करें मिडिया ' टैग करें और फिर ' निर्दिष्ट करें अधिकतम चौड़ाई ” संपत्ति और ब्रेसिज़ के भीतर एक छवि के लिए अधिकतम चौड़ाई निर्दिष्ट करें। जब भी यह शर्त पूरी होगी तो छवि प्रतिक्रियाशील हो जाएगी। उसके बाद, घुंघराले ब्रेसिज़ जोड़ें, img टैग निर्दिष्ट करें, और 'निर्दिष्ट करें' चौड़ाई: 100% ;' कीमत:
@मीडिया ( अधिकतम चौड़ाई : 480px गुणित ) {आईएमजी {
चौड़ाई : 100% ;
}
}
टिप्पणी : छवि तभी प्रतिक्रियाशील होगी जब वह निर्दिष्ट शर्त पूरी करेगी।
सीएसएस मीडिया क्वेरी लागू कर दी गई है, और अब यदि छवि को निर्दिष्ट छवि आकार में बदल दिया जाए तो वह प्रतिक्रियाशील व्यवहार करेगी। अन्यथा, यह प्रतिक्रियाशील नहीं होगा:
निष्कर्ष
छवियों को HTML और CSS के साथ प्रतिक्रियाशील बनाने के लिए, उपयोगकर्ताओं के पास विभिन्न तरीके हैं। इन विधियों में 'का उपयोग करके छवियों को प्रतिक्रियाशील बनाना शामिल है' अधिकतम चौड़ाई ' संपत्ति, ' चौड़ाई ” संपत्ति, और सीएसएस मीडिया क्वेरी को लागू करके भी। इस आलेख ने उपयोगकर्ताओं को छवियों को प्रतिक्रियाशील बनाने के लिए संपूर्ण समाधान प्रस्तुत किया है।