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

इस मैनुअल में, आप HTML में इमेज का आकार बदलने की विधि सीखेंगे।

शुरू करने से पहले, छवि को HTML फ़ाइल में जोड़ना आवश्यक है, जिस पर छवि का आकार बदलने का कार्य किया जाएगा।

HTML में इमेज कैसे एम्बेड करें?

HTML में इमेज जोड़ने के लिए, निम्न सिंटैक्स का उपयोग करें:

ऊपर उल्लिखित वाक्य रचना का विवरण नीचे वर्णित है। ' आईएमजी 'टैग दो विशेषताओं का उपयोग करता है:

• • 'स्रोत' छवि का पथ (यूआरएल) प्रदान करने के लिए प्रयोग किया जाता है।
  • 'हर चीज़' छवि प्रदर्शित नहीं होने पर वैकल्पिक पाठ प्रदान करने के लिए उपयोग किया जाता है।

एचटीएमएल

नीचे दिया गया कोड दो divs का प्रतिनिधित्व करता है। पहले डिव में, हमने अपने वेब पेज के टॉप सेंटर में एक हेडिंग को “के रूप में जोड़ा” HTML में छवि का आकार '

टैग का उपयोग करके:

< डिव >
< केंद्र >
< एच 1 > छवि का आकार में एचटीएमएल एच 1 >
केंद्र >
डिव >

दूसरा डिव 'नाम के वर्ग के साथ जोड़ा जाता है' पात्र ” और बीच में इमेज को दर्शाने के लिए हमने

टैग का इस्तेमाल किया है। केंद्र के अंदर, छवि जोड़ने के लिए नीचे दिया गया कोड लिखें:

< डिव कक्षा = 'कंटेनर' >
< केंद्र >
< आईएमजी एसआरसी = 'छवियां/तितली.जेपीजी' हर चीज़ = 'वैकल्पिक पाठ' >
केंद्र >
डिव >

'के साथ चयनित छवि 640*437 पहलू अनुपात इस तरह दिखेगा:

अगला खंड एक छवि का आकार बदलने की विधि प्रदर्शित करेगा।

HTML में इमेज का आकार कैसे बदलें?

आप छवि के आकार को अनुकूलित कर सकते हैं या 'का उपयोग करके इसका आकार बदल सकते हैं' चौड़ाई ' तथा ' कद 'इसकी चौड़ाई और ऊंचाई निर्धारित करने के लिए विशेषताएँ।

अब, जोड़ी गई छवि का चौड़ाई मान 'के रूप में सेट करें' 300 'और देखें कि यह कैसे काम करता है:

< आईएमजी एसआरसी = 'छवियां/तितली.जेपीजी' हर चीज़ = 'वैकल्पिक पाठ' चौड़ाई = '300' >

यह देखा जा सकता है कि छवि की चौड़ाई बदल दी गई है, और इसे सफलतापूर्वक आकार दिया गया है:

चौड़ाई के अलावा, ' कद 'विशेषता का उपयोग उसी उद्देश्य के लिए भी किया जा सकता है। आकार अंतर देखने के लिए, 'सेट करें' 550 'पिक्सेल छवि ऊंचाई के रूप में:

< आईएमजी एसआरसी = 'छवियां/तितली.jpg' हर चीज़ = 'वैकल्पिक पाठ' चौड़ाई = '300' कद = '550' >

आप छवि आकार में अंतर को स्पष्ट रूप से देख सकते हैं:

इस प्रकार छवि का आकार बदलने के लिए चौड़ाई और ऊंचाई विशेषताओं का उपयोग किया जाता है।

निष्कर्ष

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