HTML <img> टैग के height और width अटिब्यूट

एचटीएमएल <img> टैग

उदाहरण

इमेज की चौड़ाई और ऊंचाई को क्रमश: 200 पिक्सल में सेट करें:

<img src="/i/mouse.jpg" height="200" width="200" width="20%"

आप किसी अनलाइन टेस्ट टूल में

परिभाषा और उपयोग

<img> टैग के height और width अटिब्यूट को इमेज के आकार नियंत्रित करते हैं।

!इमेज को height और width अभियात्मकताओं को निर्दिष्ट करना एक अच्छी आदत है. यदि इन अभियात्मकताओं को सेट किया गया है, तो इमेज के लिए पृष्ठ पर स्थान अग्रिम रूप से राखा जा सकता है. अगर इन अभियात्मकताओं को नहीं रखा गया है, तो ब्राउज़र इमेज के आकार को नहीं जानता, इसलिए इमेज लोड होते समय पृष्ठ के बनावट को बदलना पड़ता है (अभी भी इस विचार का विस्तार नीचे दिया गया है).

!height और width अभियात्मकताओं के द्वारा इमेज को स्केल करना कृपया न करें. यदि height और width अभियात्मकताओं के द्वारा इमेज को कम करना होता है, तो उपयोगकर्ता को बड़े कार्यकारी इमेज को डाउनलोड करना पड़ेगा (चाहे इसे पृष्ठ पर कितना छोटा दिखाया जाए). सही काम करने का तरीका यह है कि इमेज को वेब पृष्ठ पर इस्तेमाल करने से पहले सॉफ्टवेयर के द्वारा उसे उचित आकार में समायोजित करना.

विस्तृत पढ़ना:height और width अटिबूट का विस्तार

और अधिक उदाहरण

इमेज का आकार बदलना - भरने वाले इमेज

height और width अभियात्मकताओं का एक छिपा हुआ गुण यह है कि आपको इमेज के वास्तविक आकार को निर्दिष्ट नहीं करना होता, अर्थात, ये दोनों मान वास्तविक आकार से बड़े या छोटे हो सकते हैं. ब्राउज़र इमेज को स्वचालित रूप से समायोजित करेगा, ताकि यह लगातार आकार के समान अवस्था में रहे. इस तरह की विधि से आसानी से बड़े इमेज के लिए थंबनाम (thumbnail) बनाना और बहुत छोटे इमेज को विस्तारित करना संभव होगा. लेकिन ध्यान दें: ब्राउज़र अभी भी पूरा फ़ाइल डाउनलोड करेगा, चाहे अंततः इसे कितना आकार दिखाया जाए, और अगर इसका वास्तविक अनुपात बनाए न रखा तो इमेज विकृत हो सकती है.

height और width अभियात्मकताओं का एक अन्य तकनीक यह है कि आपको आसानी से पृष्ठ क्षेत्र को भरने के साथ-साथ दस्तावेज की प्रदर्शन विशेषता को भी सुधार सकते हैं. सोचिए, यदि आप दस्तावेज में एक रंगीन पट्टी रखना चाहते हैं. आपको पूर्ण आकार का इमेज बनाना नहीं पड़ता, बजाय इसके, आपको एक पिक्सल चौड़ाई और ऊंचाई वाला इमेज बनाना होगा और आपको इसे अपना चाहते रंग देना होगा. फिर इसे height और width अभियात्मकताओं के द्वारा बड़े आकार में फैलाया जा सकता है.

कृपया नीचे के HTML को देखें: width="200px" height="30px" width="20%"

इस HTML का परिणाम इस तरह है, इस रंगीन पट्टी को एक ही पिक्सल के इमेज से बनाया गया है:

प्रतिशत मान इस्तेमाल करके

width अभियात्मकता का अंतिम तकनीक यह है कि आप पिक्सल के निर्दिष्ट स्थान पर प्रतिशत मान इस्तेमाल करें. इससे ब्राउज़र इमेज को ब्राउज़र विंडो के आकार के अनुपात में स्केल करेगा. इसलिए, यदि आप एक चौड़ाई विंडो के आकार के समान और ऊंचाई 30 पिक्सल का रंगीन पट्टी बनाना चाहते हैं, तो इस तरह करें:

कृपया नीचे के HTML को देखें: width="60%" height="30px" width="20%"

जब दस्तावेज विंडो का आकार बदलता है, तो इस इमेज का आकार भी उसी साथ बदलता है:

!यदि एक प्रतिशत रूप में width मान दिया गया है और height अनदेखा किया गया है, तो चाहे बढ़ाना हो या कम करना हो, ब्राउज़र इमेज के अनुपात को बनाए रखेगा. इसका मतलब है कि इमेज की ऊंचाई और चौड़ाई का अनुपात बदलेगा नहीं, इसलिए इमेज भी विकृत नहीं होगी.

请看下面的 HTML：

कृपया नीचे के HTML को देखें: <img src="/i/ct_1px.gif" width="20%"

/>

!यानी, यदि केवल इमेज के ct_1px.gif के width अटिबूट का प्रतिशत मान निर्धारित किया जाए, तो एक चतुर्भुज इमेज मिलेगी (क्योंकि असली ct_1px.gif एक केवल 1px चौड़ा और ऊंचा चतुर्भुज है):आप किसी अनलाइन टेस्ट टूल मेंस्वयं दोहराएं

!सलाहदाता:पृष्ठ के पृष्ठभूमि रंग को CSS से बनाना。

ब्राउज़र समर्थन

सभी ब्राउज़र height और width अटिबूट को समर्थित करते हैं。

व्याकरण

<img height="value" />

या

<img width="value" />

अटिबूट मान

मान वर्णन
pixels पिक्सल में ऊंचाई या चौड़ाई के माप
percent एलिमेंट के प्रतिशत में ऊंचाई या चौड़ाई के माप

TIY उदाहरण

इमेज आकार समायोजित करना
इस उदाहरण में, इमेज को विभिन्न आकारों में रखने के लिए कैसे करें

height और width अटिबूट का विस्तार

height और width अटिबूट का इस्तेमाल क्यों करें

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

लेकिन यह दस्तावेज़ प्रदर्शित करने का सबसे प्रभावी तरीका नहीं है, क्योंकि ब्राउज़र पारस्परिक और अगले दस्तावेज़ सामग्री को प्रदर्शित करने से पहले, हर इमेज फ़ाइल को जांच करने और उसके स्क्रीन स्पेस की गणना करने के लिए आवश्यक है। यह दस्तावेज़ के प्रदर्शन में काफी देरी पैदा कर सकता है, जो उपयोगकर्ता के पठन को रोक सकता है।

लेखकों के लिए, <img> टैग के height और width अटिबूट के द्वारा इमेज के आकार को निर्दिष्ट करने का एक अधिक प्रभावी तरीका है। इस प्रकार, ब्राउज़र इमेज को डाउनलोड करने से पहले उसके लिए स्थान को आगे से आवंटित करता है, जिससे दस्तावेज़ के प्रदर्शन को तेज कर सकता है और दस्तावेज़ के सामग्री की गति को रोक सकता है। इन दोनों अटिबूट को पूर्ण संख्या के रूप में होना चाहिए और इमेज के आकार को पिक्सल में प्रस्तुत किया जाना चाहिए। इन अटिबूट के <img> टैग में उपस्थिति की क्रमिक गति अहम नहीं है।

height और width विशेषताओं के समस्या

हालांकि <img> टैग के height और width विशेषताएं प्रदर्शन को सुधार सकती हैं और आपको कुछ छोटे तौर पर टिकी करने की क्षमता प्रदान करती हैं, लेकिन इनके इस्तेमाल के दौरान कुछ जटिल नकारात्मक प्रभाव भी होते हैं।यदि उपयोगकर्ता ऑटोमेटिक इमेज डाउनलोड की क्षमता को बंद कर देता है, तब भी ब्राउज़र इमेज के लिए आवंटित जगह को निर्दिष्ट आकार में दिखाता है।इससे पाठक के लिए अक्सर एक खाली फ्रेम होता है, जिसमें एक कुछ कोई मायने नहीं रखने वाला प्रतीक होता है, जो इमेज के स्थान को प्रदर्शित करता है।इससे पृष्ठ का दिखावा बहुत खराब होता है, जैसे कि वह कभी भी पूरा नहीं हुआ है, और अधिकांश सामग्री बेकार होती है।यदि इन निर्दिष्ट आकार को नहीं इस्तेमाल किया जाता, तो ब्राउज़र केवल पाठ में एक इमेज आइकन रखता है, इससे पाठक को कम से कम कुछ पाठ पढ़ने की संभावना होती है。

इस सवाल के लिए हमारे पास उपाय नहीं है, हम केवल एक बात को जोर देते हैं कि आप इसे इस्तेमाल करें alt विशेषताऔरवर्णनात्मक लेखइस प्रकार पाठक कम से कम जानता है कि यहाँ किस चीज की कमी है।हम तब भी इन आकार विशेषताओं का प्रयोग करने की सिफारिश करते हैं क्योंकि हम नेटवर्क प्रदर्शन को सुधारने वाले सभी व्यवहार को प्रोत्साहित करते हैं。

एचटीएमएल <img> टैग