HTML వెబ్ పేజీలలో చిత్రాలను ఉపయోగించడానికి మరియు విభిన్న శైలులను వర్తింపజేయడం ద్వారా వాటిని మరింత ఆకర్షణీయంగా చేయడానికి అనుమతిస్తుంది. మీరు చిత్రం యొక్క కారక నిష్పత్తిని మార్చవలసి వస్తే లేదా మీ చిత్రం మీ వెబ్ పేజీ లేఅవుట్‌కు సరిపోకపోతే, మీరు దాని పరిమాణాన్ని మార్చవచ్చు. ఈ ప్రయోజనం కోసం, మీరు ఉపయోగించవచ్చు ' వెడల్పు 'మరియు' ఎత్తు 'పై లక్షణాలు' img ” ట్యాగ్. ఈ ప్రాపర్టీ విలువలను CSS పిక్సెల్‌లలో సులభంగా సెట్ చేయవచ్చు.

ఈ మాన్యువల్‌లో, మీరు HTMLలో చిత్రాన్ని పునఃపరిమాణం చేసే పద్ధతిని నేర్చుకుంటారు.

ప్రారంభించడానికి ముందు, ఇమేజ్ రీసైజ్ ఆపరేషన్ నిర్వహించబడే HTML ఫైల్‌కు చిత్రాన్ని జోడించడం అవసరం.

HTMLలో చిత్రాన్ని ఎలా పొందుపరచాలి?

HTMLలో చిత్రాన్ని జోడించడానికి, కింది వాక్యనిర్మాణాన్ని ఉపయోగించండి:

పైన పేర్కొన్న సింటాక్స్ యొక్క వివరణ క్రింద వివరించబడింది. ది ' img ” ట్యాగ్ రెండు లక్షణాలను ఉపయోగిస్తుంది:

• • 'src' చిత్రం యొక్క మార్గాన్ని (URL) అందించడానికి ఉపయోగించబడుతుంది.
  • 'అంతా' చిత్రం ప్రదర్శించబడకపోతే ప్రత్యామ్నాయ వచనాన్ని అందించడానికి ఉపయోగించబడుతుంది.

HTML

దిగువ కోడ్ రెండు డివిలను సూచిస్తుంది. మొదటి డివిలో, మేము మా వెబ్ పేజీ యొక్క ఎగువ మధ్యలో ఒక శీర్షికను జోడించాము “ HTMLలో చిత్ర పరిమాణం ”

ట్యాగ్‌ని ఉపయోగించడం ద్వారా:

< div >
< కేంద్రం >
< h1 > చిత్ర పరిమాణం లో HTML h1 >
కేంద్రం >
div >

'' అనే తరగతితో రెండవ డివి జోడించబడింది కంటైనర్ ” మరియు మధ్యలో ఉన్న చిత్రాన్ని సూచించడానికి, మేము

ట్యాగ్‌ని ఉపయోగించాము. మధ్యలో, చిత్రాన్ని జోడించడానికి దిగువ పేర్కొన్న కోడ్‌ను వ్రాయండి:

< div తరగతి = 'కంటైనర్' >
< కేంద్రం >
< img src = 'images/butterfly.jpg' ప్రతిదీ = 'ప్రత్యామ్నాయ-వచనం' >
కేంద్రం >
div >

'తో ఎంచుకున్న చిత్రం 640*437 కారక నిష్పత్తి ఇలా ఉంటుంది:

తదుపరి విభాగం చిత్రం పరిమాణాన్ని మార్చే పద్ధతిని ప్రదర్శిస్తుంది.

HTMLలో ఇమేజ్ రీసైజ్ చేయడం ఎలా?

''ని ఉపయోగించడం ద్వారా మీరు చిత్రం యొక్క పరిమాణాన్ని అనుకూలీకరించవచ్చు లేదా పరిమాణం మార్చవచ్చు వెడల్పు 'మరియు' ఎత్తు ” దాని వెడల్పు మరియు ఎత్తు సెట్ చేయడానికి గుణాలు.

ఇప్పుడు, జోడించిన చిత్రం యొక్క వెడల్పు విలువను ఇలా సెట్ చేద్దాం ' 300 ” మరియు ఇది ఎలా పని చేస్తుందో చూడండి:

< img src = 'images/butterfly.jpg' ప్రతిదీ = 'ప్రత్యామ్నాయ-వచనం' వెడల్పు = '300' >

చిత్రం వెడల్పు మార్చబడిందని మరియు ఇది విజయవంతంగా పరిమాణం మార్చబడిందని చూడవచ్చు:

వెడల్పుతో పాటు, ' ఎత్తు ” లక్షణాన్ని కూడా అదే ప్రయోజనం కోసం ఉపయోగించవచ్చు. పరిమాణ వ్యత్యాసాన్ని వీక్షించడానికి, సెట్ చేయండి ' 550 చిత్రం ఎత్తుగా పిక్సెల్‌లు:

< img src = 'images/butterfly.jpg' ప్రతిదీ = 'ప్రత్యామ్నాయ-వచనం' వెడల్పు = '300' ఎత్తు = '550' >

మీరు చిత్ర పరిమాణంలో తేడాను స్పష్టంగా గమనించవచ్చు:

ఇమేజ్ పరిమాణాన్ని మార్చడానికి వెడల్పు మరియు ఎత్తు గుణాలు ఎలా ఉపయోగించబడతాయి.

ముగింపు

HTML లో, ' ఎత్తు 'మరియు' వెడల్పు చిత్రం పునఃపరిమాణం కోసం గుణాలు ఉపయోగించబడతాయి. మీరు ఈ లక్షణాల విలువలను సెట్ చేయడం ద్వారా జోడించిన చిత్రం యొక్క డిఫాల్ట్ కారక నిష్పత్తిని మార్చవచ్చు. ఫలితంగా, చిత్ర పరిమాణానికి సంబంధించి స్పష్టమైన వ్యత్యాసాన్ని చూడవచ్చు. ఈ బ్లాగ్ HTMLలో చిత్రాల పరిమాణాన్ని మార్చడానికి ఎత్తు మరియు బరువు లక్షణాలను ఉపయోగించే పద్ధతిని ప్రదర్శించింది.