HTML <img> चौड़ाई एट्रिब्यूट
वर्णन और उपयोग
width एट्रिब्यूट छवि की चौड़ाई को पिक्सल में निर्दिष्ट करता है।
सूचना:छवि को height और width एट्रिब्यूट एक अच्छी आदत है। यदि इन एट्रिब्यूट को सेट किया गया है, तो छवि के लिए स्थान रिजर्व कर सकते हैं जब वेब पृष्ठ लोड होता है। अगर इन एट्रिब्यूट नहीं हैं, तो ब्राउज़र छवि के आकार को नहीं जानता है, इसलिए छवि लोड होने पर, पृष्ठ के लेआउट में परिवर्तन होता है।(इस दृष्टिकोण का विस्तृत वर्णन नीचे दिया गया है)।
सूचना:कृपया height और width एट्रिब्यूट के द्वारा छवि को स्केल करना। यदि height और width अगर आप छवि को स्केल करना चाहते हैं, तो उपयोगकर्ता को बड़े आकार की छवि डाउनलोड करना पड़ेगा (भले ही छवि पृष्ठ पर छोटी दिखे)। सही कार्यवाही है कि छवि को वेब पृष्ठ पर इस्तेमाल करने से पहले, यह कॉम्प्यूटर सॉफ्टवेयर के द्वारा उचित आकार में संसाधित करना चाहिए।
आगे पढ़ें:height और width विशेषताओं का विस्तार
उदाहरण
600 पिक्सल ऊंचाई और 500 पिक्सल विस्तार की छवि:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
व्याकरण
<img width="pixels">
गुण मान
| मान | वर्णन |
|---|---|
| pixels | छवि का विस्तार पिक्सल में निर्दिष्ट करें (उदाहरण के लिए width="100"). |
और अधिक उदाहरण
छवि का आकार बदलें - भरने वाली छवि बनाएं
height और width गुणों का एक छिपा हुआ गुण है कि लोगों को छवि के वास्तविक आकार को निर्दिष्ट नहीं करना है, अर्थात, ये दोनों मान वास्तविक आकार से बड़े या छोटे हो सकते हैं. ब्राउज़र आकार को स्वचालित रूप से समायोजित करेगा, ताकि यह आवंटित जगह के आकार के अनुरूप हो. इस तरह के तरीके से बड़ी छवि के लिए लघु छवि बनाना और बहुत छोटी छवि को विस्तारित करना आसान होगा. लेकिन ध्यान दें: ब्राउज़र अभी भी पूरा फ़ाइल डाउनलोड करेगा, चाहे अंततः इसे कितना आकार दिखाया जाए, और अगर इसके वास्तविक वृत्ताकारता को बनाए रखा नहीं तो छवि को विकृति हो सकती है.
height और width गुणों का एक अन्य तकनीक, वेब पृष्ठ के क्षेत्र को आसानी से भरना और दस्तावेज़ की प्रदर्शनीयता को सुधारना है. यदि आप दस्तावेज़ में एक रंगीन पट्टी डालना चाहते हैं, तो आपको पूर्ण आकार की छवि बनाने की जरूरत नहीं है. इसके बजाय, आपको एक इसकी विस्तार और ऊंचाई एक पिक्सल की छवि बनानी है, और आपके चाहते रंग को उसको आबंटित करें. फिर height और width गुणों का उपयोग करके इसे बड़ा करें.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
इस HTML का परिणाम नीचे दिया गया है, यह रंगीन पट्टी एक ही पिक्सल के छवि से बनी है:
प्रतिशत का उपयोग करना
width गुण का अंतिम तकनीक, पिक्सल के निर्दिष्ट अभिकरण के स्थान पर प्रतिशत का उपयोग करना है. इससे ब्राउज़र छवि को ब्राउज़र विंडो के साथ एक निश्चित अनुपात में स्केल करेगा. इसलिए, यदि आप एक इसकी ऊंचाई 30 पिक्सल की रंगीन पट्टी बनाना चाहते हैं जो विंडो के विस्तार के अनुरूप हो, तो इस तरह करें:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
जब दस्तावेज़ विंडो का आकार बदलता है तो इस छवि का आकार भी बदलता है:
सूचना:यदि एक प्रतिशत रूपांतर विस्तार की गई width की गई है और height को नज़रअंदाज़ कर दिया है, तो चाहे वृद्धि हो या कमी, ब्राउज़र छवि के वृत्ताकारता को बनाए रखेगा. इसका मतलब है कि छवि की ऊंचाई और विस्तार का अनुपात बदल नहीं होगा, इसलिए छवि को कोई विकृति नहीं होगी.
देखें नीचे वाला HTML:
<img src="/i/ct_1px.gif"} width="20%" />
यानी, यदि आपको केवल ct_1px.gif के width विशेषता का प्रतिशत मान निर्दिष्ट करें, तो एक चतुर्भुज इमेज मिलेगी (क्योंकि आरंभिक ct_1px.gif एक केवल 1px चौड़ाई और ऊंचाई वाला चतुर्भुज है):
सूचना:हमारे उदाहरणों का उद्देश्य आपको height और width विशेषताओं के इस्तेमाल को बेहतर रूप से समझाना है। यदि आपको केवल विशाल एकल रंग की बैग बैकग्राउंड बनानी है, तो बेहतर तरीका हैCSS के द्वारा पृष्ठभूमि रंग बनाना
height और width विशेषताओं का विस्तार
क्यों height और width विशेषताओं का इस्तेमाल करना चाहिए
क्या आपको देखा है कि दस्तावेज लोड होते समय उसकी सामग्री अनियमित रूप से गतिशील होती है? इसका कारण यह है कि ब्राउज़र हर लोड होने वाले इमेज को प्रदर्शित करने के लिए, पृष्ठ के व्यवस्थाओं को बदलने के लिए लगातार बदलता रहता है। ब्राउज़र इमेज का आकार निर्धारित करने के लिए इमेज के चौड़ाई और ऊंचाई को डाउनलोड करता है, फिर उसे प्रदर्शन विंडो में एक क्षैतिज चतुर्भुज के रूप में छोड़ देता है। फिर ब्राउज़र पृष्ठ के प्रदर्शन व्यवस्थाओं को बदलता है, ताकि इमेज को प्रदर्शन के अंदर घुसा सके। इससे हमें यह भी सीखते हैं कि इमेज स्वतंत्र फ़ाइल है, जो स्रोत फ़ाइल से स्वतंत्र रूप से लोड होती है।
यह दस्तावेज को प्रदर्शित करने का सबसे अधिक प्रभावी तरीका नहीं है, क्योंकि ब्राउज़र को पढ़े जाने वाले अगले और आगे के सामग्री को प्रदर्शित करने से पहले, हर इमेज फ़ाइल को जांचना और उसके स्क्रीन स्पेस की गणना करना पड़ता है। इससे दस्तावेज के प्रदर्शन में बहुत देरी हो सकती है, जो उपयोगकर्ता के पढ़ने को रोक सकती है।
यदि निर्माताओं के लिए, <img> टैग के height और width विशेषताओं के द्वारा इमेज के आकार को निर्दिष्ट करना एक और अधिक प्रभावी तरीका है। इस तरह, ब्राउज़र इमेज को डाउनलोड करने से पहले उसके लिए स्थान को आगे से आवंटित करता है, जिससे दस्तावेज के प्रदर्शन को तेज कर सकता है, और दस्तावेज के सामग्री के अदीन को खिसकाने से बच सकता है। इन दोनों विशेषताएं को पूर्ण नंबर के रूप में और पिक्सल में प्रदर्शित करना आवश्यक है। इन विशेषताओं की उपस्थिति की क्रमवारी <img> टैग में कोई महत्व नहीं है。
height और width विशेषताओं का मसला
हालांकि <img> टैग के height और width विशेषताएं प्रदर्शन को बेहतर कर सकती हैं और आपको कुछ छोटे टिक्कू लागू करने में मदद करती हैं, लेकिन उनके इस्तेमाल के दौरान कुछ कठिन नकारात्मक प्रभाव भी होते हैं। यदि उपयोगकर्ता ने ऑटोमेटिक इमेज डाउनलोड की कार्यक्षमता बंद कर दी हो, तो ब्राउज़र अभी भी इमेज के लिए निर्दिष्ट आकार के खाली स्थान को प्रदर्शित करेगा। इससे अक्सर पाठक को एक खाली फ्रेम मिलता है, जिसमें एक कोई अर्थ नहीं रखने वाला चिह्न होता है, जिससे यह स्थान इमेज के लिए रखा गया है। इससे पृष्ठ बहुत खराब लगता है, जैसे कि वह कभी तकम्पट नहीं हुआ है, और अधिकांश सामग्री निर्मुक्त होती है। यदि निर्दिष्ट आकार का इस्तेमाल नहीं किया जाता, तो ब्राउज़र सिर्फ पाठ में एक इमेज आइकॉन रखेगा, जिससे कम से कम कुछ पाठ पढ़ा जा सकता है।
इस सवाल के लिए हमें उपाय नहीं मिला है, हम केवल एक बात को जोर देते हैं कि आप इस्तेमाल करें alt गुण औरवर्णनात्मक लेखइस प्रकार पाठक कम से कम जानता है कि यहाँ किस चीज की कमी है।हम फिर भी इन आकार गुणों का इस्तेमाल करने की सिफारिश करते हैं क्योंकि हम नेटवर्क प्रदर्शन को सुधारने वाले हर व्यवहार को प्रोत्साहित करते हैं。
ब्राउज़र समर्थन
| च्रोम | एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| च्रोम | एज | फायरफॉक्स | सफारी | ओपेरा |
| सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट | सापोर्ट |
