மார்க் டவுனில் படங்களைச் சேர்த்து, படத்தின் அளவை மாற்றவும்

மார்க் டவுனில் படங்களைச் சேர்ப்பதற்கு:

தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது.

மார்க் டவுனில் படத்தின் அளவை மாற்ற:

மார்க் டவுனில் படத்தின் அளவை மாற்ற, HTML இன் “ ” குறிச்சொல்லைப் பயன்படுத்துகிறோம். இந்த குறிச்சொல் மட்டுமே மார்க் டவுனில் உள்ள படத்தின் அளவை மாற்ற உதவுகிறது மற்றும் இந்த ' ' குறிச்சொல்லின் தொடரியல் கீழே கொடுக்கப்பட்டுள்ளது.

அகலம் மற்றும் உயரத்தின் மதிப்புகளை எண்களிலும் சதவீதங்களிலும் அமைப்பதன் மூலம் படத்தின் அளவை மாற்றலாம். மார்க் டவுனில் படத்தின் அளவை மாற்றுவதற்கு இந்த “ ” குறிச்சொல்லில் உள்ள நடை பண்புக்கூறையும் நாம் பயன்படுத்தலாம்.

எடுத்துக்காட்டு # 01:

மார்க் டவுன் குறியீடுகளைச் செயல்படுத்த விஷுவல் ஸ்டுடியோ குறியீட்டைப் பயன்படுத்துகிறோம். மார்க் டவுன் குறியீடுகளுக்கு, நாம் உரை திருத்தி மற்றும் முன்னோட்ட சாளரம் இரண்டையும் திறக்க வேண்டும். உரை திருத்தியில், நாம் உள்ளீட்டைச் சேர்க்க வேண்டும் மற்றும் முன்னோட்ட சாளரத்தில் வெளியீடு பெறப்படும். டெக்ஸ்ட் எடிட்டரில், முதலில் “!” ஐ வைத்து மார்க் டவுனில் படத்தைச் சேர்க்கிறோம். சின்னம் மற்றும் சதுர அடைப்புக்குறிகளைச் சேர்க்கவும், அதில் 'Alt text' ஐச் சேர்க்கிறோம். இப்போது, ​​​​படத்தின் பாதையைச் சேர்க்கிறோம்.

குறியீடு மற்றும் படம் இரண்டும் ஒரே கோப்பகத்தில் சேமிக்கப்பட்டிருப்பதால் படத்தின் பெயரை அதன் நீட்டிப்புடன் உள்ளிடுகிறோம். எனவே, 'Cloud.png' என்ற பெயரை இங்கே சேர்க்கிறோம். பின்னர், “கிளவுட் இமேஜ்” என்ற உரையைச் சேர்க்கிறோம், மேலும் இது மவுஸ் ஓவர் போது மட்டுமே காண்பிக்கப்படும் உரையாகும். இப்போது, ​​படம் சேர்க்கப்பட்டுள்ளது, மேலும் இந்த படத்தை முன்னோட்ட சாளரத்திலும் பார்க்கலாம்.

மேலே காட்டப்படும் மார்க் டவுன் குறியீட்டில் இந்தப் படத்தைச் சேர்த்ததால், மேகக்கணிப் படம் கீழே காட்டப்பட்டுள்ளது.

எடுத்துக்காட்டு # 02:

இப்போது, ​​“ ” குறிச்சொல்லைப் பயன்படுத்தி இந்தப் படத்தின் அளவை மாற்றுகிறோம். முதலில், 'src' ஐ உள்ளிடுகிறோம், அதில் படத்தின் பெயர் அல்லது பாதை சேர்க்கப்பட்டுள்ளது. இதற்குப் பிறகு, நாங்கள் 'alt' ஐ வைத்து 'கிளவுட் படத்தை' சரிசெய்கிறோம். படத்தின் 'அகலத்தை' '230' ஆக சரிசெய்தோம். 'உயரம்' '300' ஆக சரிசெய்யப்பட்டது. இந்த ' ' குறிச்சொல்லில் 'தலைப்பை' சேர்க்கிறோம், மேலும் இந்த 'தலைப்பின்' மதிப்பு 'கிளவுட் தலைப்பு' ஆகும். இப்போது, ​​படத்தின் அளவு மாற்றியமைக்கப்பட்டுள்ளது. முன்னோட்ட சாளரத்தில் படத்தின் மாற்றியமைக்கப்பட்ட அளவைக் காணலாம்.

இந்த முடிவில் படத்தின் அளவு மாற்றியமைக்கப்பட்டது மற்றும் படத்தின் 'அகலம்' '230' மற்றும் 'உயரம்' '300' ஆகும். ஏனெனில் இந்த அகலத்தையும் உயரத்தையும் மார்க் டவுன் குறியீட்டில் சரிசெய்துள்ளோம்.

எடுத்துக்காட்டு # 03:

படத்தை 'அகலம்' மற்றும் 'உயரம்' ஆகியவற்றின் மதிப்புகளை சதவீதத்தில் வைப்பதன் மூலம் மாற்றலாம். படத்தின் பெயர் அல்லது பாதையைச் சேர்த்து, “alt” ஐ “Cloud Image” ஆக சரிசெய்த பிறகு, படத்தின் “அகலம்” மற்றும் “உயரம்” ஆகியவற்றை “50%” ஆக அமைத்துள்ளோம். பின்னர், 'தலைப்பை' சேர்த்து, இந்த குறிச்சொல்லை மூடவும்.

“ ” குறிச்சொல்லைப் பயன்படுத்தி அதன் அளவு மாற்றியமைக்கப்பட்ட படம் இங்கே. படத்தின் உயரம் மற்றும் அகலம் '50%' ஆகும்.

எடுத்துக்காட்டு # 04:

இப்போது, ​​இந்த ' ' குறிச்சொல்லில் உள்ள 'ஸ்டைல்' பண்புக்கூறை மார்க் டவுனில் உள்ள படத்தின் அளவை மாற்றியமைக்கப் பயன்படுத்துகிறோம். நாம் படத்தின் பெயரையும் பின்னர் 'alt' பண்புக்கூறையும் சேர்க்க வேண்டும். இதற்குப் பிறகு, 'ஸ்டைல்' பண்புக்கூறை வைத்து, அதன் மதிப்புகளாக 'அகலம் மற்றும் உயரத்தை' சேர்த்துள்ளோம். நாம் அமைக்கும் “அகலம்” பிக்சல்களில் “500px” மற்றும் “உயரம்” “400px” ஆகும். இப்போது, ​​படத்தின் அளவு அதற்கேற்ப சரிசெய்யப்படும்.

இந்த முடிவில் படத்தின் அளவு புதுப்பிக்கப்பட்டது; அதன் 'அகலம்' இப்போது '500px' மற்றும் அதன் 'உயரம்' '400px' ஆகும். நடை பண்புக்கூறில் அகலம் மற்றும் உயரத்தை நாம் சரிசெய்த இடத்தில் மேலே கொடுக்கப்பட்டுள்ள மார்க் டவுன் குறியீட்டின் விளைவாக இது தெரியும்.

எடுத்துக்காட்டு # 05:

நாங்கள் மற்றொரு படத்தைச் சேர்க்கிறோம். ஆனால் இந்த மார்க் டவுன் குறியீட்டில், படத்தின் அளவை மாற்ற மாட்டோம். நாம் “ ” குறிச்சொல்லைப் பயன்படுத்தினால் மட்டுமே படத்தின் அளவு மாற்றப்படும். நாங்கள் '!' பின்னர் சதுர அடைப்புக்குறிக்குள் 'சன் இமேஜ்' என்ற உரையைச் சேர்க்கவும். சதுர அடைப்புக்குறிகளை மூடிய பிறகு, 'New_sun.png' என்ற படத்தின் பெயரைச் செருகிய அடைப்புக்குறிக்குள் வைத்து, பின்னர் மவுஸ்ஓவரில் காண்பிக்கப்படும் உரையைச் சேர்ப்போம். படத்தின் அசல் அளவு முடிவில் காண்பிக்கப்படும்.

இந்த படத்தை மார்க் டவுன் குறியீட்டில் சேர்த்ததால் சூரியனின் படம் காட்டப்பட்டுள்ளது. மேலும், ' ' குறிச்சொல்லைப் பயன்படுத்தாமல் படத்தின் அளவை சரிசெய்ய முடியாது என்பதால் படத்தின் அசல் அளவு தெரியும்.

எடுத்துக்காட்டு # 06:

“ ” குறிச்சொல்லைப் பயன்படுத்துவதன் மூலம், இப்போது இந்தப் படத்தின் அளவை மாற்றுகிறோம். முதலில், 'src' புலத்தில் மாற்ற விரும்பும் படத்தின் பெயர் அல்லது பாதையைச் சேர்க்கிறோம். படத்தின் 'அகலம்' மற்றும் 'உயரம்' இரண்டும் '300' ஆக மாற்றப்பட்டுள்ளன. படத்தின் அளவு இப்போது மாறிவிட்டது. முன்னோட்ட சாளரம் படத்தின் புதிய அளவைக் காட்டுகிறது.

படத்தின் அகலம் மற்றும் உயரம் இரண்டும் '300' ஆக மாற்றப்பட்டுள்ளன.

எடுத்துக்காட்டு # 07:

படத்தின் 'அகலம்' மற்றும் 'உயரம்' மதிப்புகளை சதவீதத்தில் அமைப்பதன் மூலம், இந்த பரிமாணங்களை நாம் எளிதாக மாற்றலாம். நாங்கள் இருவரும் படத்தின் 'அகலம்' மற்றும் 'உயரம்' ஆகியவற்றை '40%' ஆக சரிசெய்து, பின்னர் இந்த குறிச்சொல்லை மூடினோம்.

40% உயரமும் 40% அகலமும் கொண்ட படம் இதோ. படத்தின் பெயரைச் சேர்த்த பிறகு ' ' குறிச்சொல்லின் உள்ளே இந்த அகலத்தையும் உயரத்தையும் சேர்த்துள்ளோம்.

எடுத்துக்காட்டு # 08:

இப்போது, ​​மார்க் டவுனில் படத்தின் அளவை மாற்ற, ' ' குறிச்சொல்லில் உள்ள 'ஸ்டைல்' பண்புக்கூறைப் பயன்படுத்துகிறோம். படத்தின் பெயரையும் 'alt' பண்புக்கூறையும் சேர்த்த பிறகு, 'ஸ்டைல்' பண்புக்கூறுக்கு மதிப்புகளாக 'அகலம் மற்றும் உயரம்' சேர்த்துள்ளோம். நாங்கள் குறிப்பிடும் 'அகலம்' '450px' ஆகும், அதே நேரத்தில் 'உயரம்' '450px' ஆகவும் சரிசெய்யப்படுகிறது. அகலம் மற்றும் உயரத்தின் இந்தப் புதிய மதிப்புகளுக்கு ஏற்ப படத்தின் அளவு இப்போது சரியாக மாறும்.

இப்போது, ​​இந்த குறியீட்டின் முடிவு கீழே காட்டப்படும் முன்னோட்ட சாளரத்திலும் காட்டப்படும். இந்தப் படத்தின் அகலம் மற்றும் உயரம் இரண்டும் கீழே உள்ள இந்த முடிவில் இப்போது “450px” ஆக உள்ளது.

முடிவுரை:

இந்த வழிகாட்டியில் படங்களைச் சேர்ப்பது பற்றிய கருத்தை விரிவாக ஆராய்ந்தோம், மேலும் மார்க் டவுனில் படத்தின் அளவை எவ்வாறு மாற்றுவது என்பதையும் ஆராய்ந்தோம். மார்க் டவுனில் படங்களைச் சேர்த்து, “ ” குறிச்சொல்லின் உதவியுடன் அவற்றின் அளவை மாற்றியமைத்து, இவை அனைத்தையும் மார்க் டவுனில் எப்படிச் செய்வது என்று காட்டியுள்ளோம். அகலம் மற்றும் உயரத்தின் மதிப்புகளை எண்களிலும் சதவீதங்களிலும் வைத்து படத்தின் அளவை மாற்றியுள்ளோம். ' ' குறிச்சொல்லில் உள்ள நடை பண்புக்கூறை மார்க் டவுனில் உள்ள படத்தின் அளவைப் புதுப்பிக்க அல்லது மாற்றியமைக்கப் பயன்படுத்தியுள்ளோம்.