टैग img
टैग img एक छवि बनाता है। छवि का पथ
विशेषता src में निर्दिष्ट किया जाता है। समापन टैग की
आवश्यकता नहीं होती है।
विशेषताएँ
| विशेषता | विवरण |
|---|---|
src |
छवि का पथ निर्धारित करता है।
अनिवार्य विशेषता। |
alt |
वैकल्पिक पाठ, जो छवि के स्थान पर दिखाया जाएगा,
यदि वह नहीं मिलती है (उदाहरण के लिए, उसका पथ गलत निर्दिष्ट है)।
अनिवार्य विशेषता। इसकी अनुपस्थिति में वैलिडेटर (वह प्रोग्राम जो HTML या CSS की शुद्धता जांचता है) एरर देगा। |
width |
छवि की चौड़ाई, पिक्सेल में (इस स्थिति में माप की इकाइयाँ निर्दिष्ट नहीं की जातीं) या छवि के मूल तत्व के प्रतिशत में। |
height |
छवि की ऊँचाई, पिक्सेल में (इस स्थिति में माप की इकाइयाँ निर्दिष्ट नहीं की जातीं) या छवि के मूल तत्व के प्रतिशत में। |
बारीकियाँ
यदि छवि के लिए न तो चौड़ाई और न ही ऊँचाई निर्धारित की गई है - छवि का अपना वास्तविक आकार होगा। यदि ऊँचाई निर्धारित है - छवि निर्धारित ऊँचाई की हो जाएगी, और चौड़ाई इस प्रकार समायोजित होगी कि उसके अनुपात विकृत न हों।
यदि केवल चौड़ाई निर्धारित है - इसी प्रकार, छवि ऊँचाई के अनुसार समायोजित हो जाएगी, ताकि अनुपात बने रहें।
यदि चौड़ाई और ऊँचाई दोनों निर्धारित हैं - छवि के अनुपात विकृत हो सकते हैं (या नहीं भी, जैसा आप अनुमान लगाएँ)। यदि चौड़ाई या ऊँचाई (या दोनों मिलाकर) वास्तविक आकार से अधिक हैं - छवि बड़ी हो जाएगी, लेकिन गुणवत्ता में कमी आएगी।
छवियों की चौड़ाई और ऊँचाई विशेषताओं में निर्धारित करने (सीएसएस के माध्यम से नहीं) की सलाह दी जाती है - इस स्थिति में ब्राउज़र छवियों को तेजी से लोड करेगा - उसे प्रत्येक छवि प्राप्त करने के बाद उसका आकार गणना करने की आवश्यकता नहीं होती है।
आवश्यकता के बिना छवि के वास्तविक
आकार को कम करने की अनुशंसा नहीं की जाती है। उदाहरण के लिए,
छवि का वास्तविक आकार 1000 बाय 1000
पिक्सेल है, और आप उसकी चौड़ाई 100px निर्धारित करते हैं।
इस स्थिति में स्क्रीन पर छवि 100 पिक्सेल की दिखाई देगी,
हालाँकि उसका आकार पूरे हज़ार का होगा और, तदनुसार, लोड होने में
बहुत अधिक समय लगेगा।
उदाहरण
आइए साइट पर एक छवि जोड़ें और
विशेषताएँ height और width निर्धारित न करें।
छवि का अपना वास्तविक आकार होगा:
html<img src="monkey.png" alt="बंदर">
Результат:
उदाहरण
आइए छवि की चौड़ाई जोड़ने का प्रयास करें
विशेषता width का उपयोग करके, ऊँचाई
इसके साथ ही इस प्रकार समायोजित होनी चाहिए कि छवि के
अनुपात बने रहें:
html<img src="monkey.png" width="200" alt="बंदर">
Результат:
उदाहरण
और अब आइए छवि में ऊँचाई जोड़ें
विशेषता height का उपयोग करके, चौड़ाई
इसके साथ ही इस प्रकार समायोजित होगी कि छवि के
अनुपात बने रहें:
html<img src="monkey.png" height="100" alt="बंदर">
Результат:
उदाहरण
आइए एक साथ छवि में ऊँचाई और चौड़ाई दोनों जोड़ें। छवि के अनुपात इसके साथ ही विकृत होने चाहिए (जरूरी नहीं है, लेकिन इस मामले में ऊँचाई और चौड़ाई इस प्रकार चुनी गई हैं कि अनुपात विकृत हों):
html<img src="monkey.png" height="100" width="300" alt="बंदर">
Результат:
उदाहरण
आइए छवि का गलत पथ निर्धारित करें
(सरलता के लिए इसे खाली छोड़ दें)। छवि के स्थान पर
हम विशेषता alt की सामग्री देखेंगे
(ऐसा लगता है कि यह सामान्य पाठ है - लेकिन इसे कॉपी करने का प्रयास करें -
आप कुछ भी कॉपी नहीं कर पाएँगे,
यह एक छवि की तरह खिंचेगा):
html<img src="" alt="बंदर">
Результат:
यह भी देखें
-
गुण
width,
जो तत्व की चौड़ाई निर्धारित करता है -
गुण
height,
जो तत्व की ऊँचाई निर्धारित करता है -
टैग
figure,
जो छवियों और उनके कैप्शन को समूहित करता है -
टैग
figcaption,
जो छवि का कैप्शन निर्धारित करता है -
गुण
background-image,
जो पृष्ठभूमि छवि निर्धारित करता है