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