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 இல் படங்களை மறுஅளவிடுவதற்கு உயரம் மற்றும் எடை பண்புகளைப் பயன்படுத்துவதற்கான முறையை இந்த வலைப்பதிவு விளக்கியுள்ளது.