एक छवि के चारों ओर पाठ लपेटने के लिए कोड की आवश्यकता है? आम तौर पर जब आप एक HTML पृष्ठ बनाते हैं, तो सब कुछ रैखिक रूप से प्रवाहित होता है, जिसका अर्थ है एक के बाद एक सीधे ब्लॉक। मेरी पिछली सभी पोस्ट इसका एक उदाहरण हैं, यानी टेक्स्ट, फिर चित्र, फिर टेक्स्ट इत्यादि।
कभी-कभी आप किसी छवि के नीचे के बजाय उसके आगे पाठ शामिल करना चाह सकते हैं। इसे इमेज के चारों ओर रैपिंग टेक्स्ट कहा जाता है। HTML का उपयोग करके टेक्स्ट को रैप करना वास्तव में काफी आसान है। ध्यान दें कि टेक्स्ट को रैप करने के लिए आपको CSS का उपयोग करने की आवश्यकता नहीं है।
हालाँकि, इन दिनों W3C इस प्रकार के कार्यों के लिए HTML के बजाय CSS का उपयोग करने की सलाह देता है। मैं नीचे दोनों विधियों का उल्लेख करूंगा, लेकिन यदि आप कर सकते हैं, तो सीएसएस का उपयोग करना बेहतर है क्योंकि यह उत्तरदायी वेबसाइट डिजाइनों के लिए अधिक अनुकूल है।
HTML का उपयोग करके छवि के चारों ओर टेक्स्ट रैप करें
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। फ्यूस डिक्टम ग्रेविडा एनिम, क्विस अल्ट्रीसिस मौरिस पॉसुरे क्विस। ड्यूस एडिपिसिसिंग टिनसीडंट सैगिटिस। कम समाज नाटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। अलिकम ए फेलिस विटे ऑग्यू लोबोर्टिस डिक्टम। कुराबिटुर मोलेस्टी पोसुरे लॉरीट। लोरेम एजेस्टस नॉन इम्पेरडिएट एनिम कॉन्ग्यू में यूट पेलेंटेस्क ननक।
छवि के दाईं ओर टेक्स्ट रैप करने के लिए, आपको चित्र को बाईं ओर संरेखित करना होगा:
<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>
यदि आप चाहते हैं कि टेक्स्ट बाईं ओर दिखाई दे और छवि सबसे दाईं ओर दिखाई दे, तो बस संरेखण पैरामीटर को "दाएं" में बदलें।
लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। फ्यूस डिक्टम ग्रेविडा एनिम, क्विस अल्ट्रीसिस मौरिस पॉसुरे क्विस। ड्यूस एडिपिसिसिंग टिनसीडंट सैगिटिस। कम समाज नाटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। अलिकम ए फेलिस विटे ऑग्यू लोबोर्टिस डिक्टम। कुराबिटुर मोलेस्टी पोसुरे लॉरीट। लोरेम एजेस्टस नॉन इम्पेरडिएट एनिम कॉन्ग्यू में यूट पेलेंटेस्क ननक।
<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>
इतना ही! बहुत आसान है ना? केवल तभी जब आप CSS का उपयोग करना चाहेंगे, यदि आप चित्रों में हाशिये जोड़ना चाहते हैं, ताकि पाठ और छवि के बीच कुछ स्थान हो।
आप निम्न CSS स्टाइलिंग कोड का उपयोग करके किसी चित्र में हाशिया जोड़ सकते हैं:
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
उपरोक्त कोड छवि के दाईं ओर 10 पिक्सेल रिक्त स्थान जोड़ने के लिए MARGIN CSS तत्व का उपयोग करता है। चूंकि हमने छवि को बाईं ओर संरेखित किया है, हम दाईं ओर खाली स्थान जोड़ना चाहते हैं।
मूल रूप से, चार नंबर टॉप राइट बॉटम लेफ्ट का प्रतिनिधित्व करते हैं। इसलिए यदि आप एक राइट-अलाइन इमेज में व्हाइट स्पेस जोड़ना चाहते हैं, तो आप यह करेंगे:
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
इसलिए इस कार्य को करने के लिए HTML का उपयोग करना काफी सरल है, लेकिन एक बार फिर, यह प्रतिक्रियाशील साइटों के लिए अच्छा काम नहीं कर सकता है।
सीएसएस का इस्तेमाल करके इमेज के चारों ओर टेक्स्ट रैप करें
किसी छवि के चारों ओर टेक्स्ट लपेटने का बेहतर तरीका सीएसएस का उपयोग करना है। यह आपको तत्वों की स्थिति पर अधिक बारीक नियंत्रण देता है और आधुनिक कोडिंग मानकों के साथ बेहतर काम करता है।
<img src="IMAGE URL" alt="A photo" class="left" />
भले ही मैंने HTML उदाहरण में CSS को सीधे इमेज टैग में शामिल किया हो, फिर भी आपको वास्तव में ऐसा कभी नहीं करना चाहिए। इसके बजाय, आपके पास एक अलग फ़ाइल होनी चाहिए जिसे स्टाइलशीट कहा जाता है जिसमें आपके सभी CSS कोड होते हैं।
IMG टैग में, आप बस टैग को एक क्लास असाइन करते हैं और उसे एक नाम देते हैं। मेरे उदाहरण में, मैंने कक्षा का नाम बाएं . रखा है . मेरी स्टाइलशीट में, मुझे बस इतना करना है कि निम्नलिखित कोड जोड़ें:
.left {
float: left;
padding: 0 10px 0 0;} जैसा कि आप देख सकते हैं, मैंने बाईं ओर संरेखित छवि के दाईं ओर 10px की पैडिंग जोड़ी। मैंने दस्तावेज़ के सामान्य प्रवाह से छवि को स्थानांतरित करने और पैरेंट कंटेनर के बाईं ओर रखने के लिए फ्लोट प्रॉपर्टी का भी उपयोग किया।
जैसा कि आप देख सकते हैं, यह उस सारे कोड को IMG टैग में जोड़ने से कहीं ज्यादा साफ है। इसे प्रबंधित करना भी आसान है और आप अपने वेबपेज पर लुक को कस्टमाइज़ करने के लिए बहुत अधिक CSS गुणों का उपयोग कर सकते हैं। यदि आपके कोई प्रश्न हैं, तो बेझिझक टिप्पणी करें। आनंद लें!