মার্কডাউনে ছবি যোগ করার জন্য:
সিনট্যাক্স নিচে দেওয়া হল.
মার্কডাউনে চিত্রের আকার পরিবর্তন করার জন্য:
মার্কডাউনে ছবির আকার পরিবর্তন করার জন্য, আমরা HTML এর “ ” ট্যাগ ব্যবহার করি। শুধুমাত্র এই ট্যাগটি মার্কডাউনে ছবির আকার পরিবর্তন করতে সাহায্য করে এবং এই “
” ট্যাগের সিনট্যাক্স নিচে দেওয়া হল।
< img src = 'ছবির নাম' সবকিছু = '' প্রস্থ = 'মান' উচ্চতা = 'মান' >
সংখ্যার পাশাপাশি শতাংশে প্রস্থ এবং উচ্চতার মান নির্ধারণ করে আমরা চিত্রের আকার পরিবর্তন করতে পারি। মার্কডাউনে চিত্রের আকার পরিবর্তন করার জন্য আমরা এই “ ” ট্যাগের স্টাইল বৈশিষ্ট্যটিও ব্যবহার করতে পারি।
উদাহরণ # 01:
মার্কডাউন কোডগুলি সম্পাদন করার জন্য আমরা ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করি। মার্কডাউন কোডগুলির জন্য, আমাদের পাঠ্য সম্পাদকের পাশাপাশি প্রিভিউ উইন্ডো উভয়ই খুলতে হবে। টেক্সট এডিটরে, আমাদের ইনপুট যোগ করতে হবে এবং প্রিভিউ উইন্ডোতে আউটপুট পাওয়া যাবে। টেক্সট এডিটরে, আমরা প্রথমে “!” বসিয়ে মার্কডাউনে ছবি যোগ করি। প্রতীক এবং তারপর বর্গাকার বন্ধনী যোগ করুন যেখানে আমরা 'Alt পাঠ্য' যোগ করি। এখন, আমরা ছবির পথ যোগ করছি।
আমরা এর এক্সটেনশন সহ ছবির নাম লিখি কারণ কোড এবং ইমেজ উভয়ই একই ডিরেক্টরিতে সংরক্ষিত হয়। সুতরাং, আমরা এখানে শুধু নাম যোগ করি যা হল “cloud.png”। তারপর, আমরা টেক্সট যোগ করি যা 'ক্লাউড ইমেজ' এবং এটি সেই টেক্সট যা শুধুমাত্র মাউসওভারের সময় দেখায়। এখন, ছবিটি যোগ করা হয়েছে এবং আমরা প্রিভিউ উইন্ডোতেও এই ছবিটি দেখতে পাচ্ছি।
ক্লাউড চিত্রটি নীচে দেখানো হয়েছে কারণ আমরা এই চিত্রটিকে মার্কডাউন কোডে যুক্ত করেছি যা উপরে প্রদর্শিত হয়েছে।
উদাহরণ # 02:
এখন, আমরা “ ” ট্যাগ ব্যবহার করে এই ছবির আকার পরিবর্তন করছি। প্রথমে, আমরা 'src' লিখি যেখানে ছবির নাম বা পথ যোগ করা হয়েছে। এর পরে, আমরা 'alt' রাখি এবং 'ক্লাউড চিত্র' সামঞ্জস্য করি। আমরা ইমেজের 'প্রস্থ' কে '230' এ সামঞ্জস্য করেছি। 'উচ্চতা' '300' এ সামঞ্জস্য করা হয়েছে। আমরা এই “
” ট্যাগে “টাইটেল” যোগ করি এবং এই “টাইটেল” এর মান হল “ক্লাউড টাইটেল”। এখন, ছবির আকার পরিবর্তন করা হয়েছে। আপনি প্রিভিউ উইন্ডোতে ছবির পরিবর্তিত আকার দেখতে পারেন।
এই ফলাফলে চিত্রটির আকার পরিবর্তন করা হয়েছে এবং চিত্রটির 'প্রস্থ' হল '230' এবং 'উচ্চতা' হল '300'। কারণ আমরা মার্কডাউন কোডে এই প্রস্থ এবং উচ্চতা সামঞ্জস্য করেছি।
উদাহরণ # 03:
এছাড়াও আমরা চিত্র 'প্রস্থ' এবং 'উচ্চতা' পরিবর্তন করতে পারি তাদের মান শতাংশে রেখে। ছবির নাম বা পাথ যোগ করার পর এবং 'ক্লাউড ইমেজ'-এ 'alt' সামঞ্জস্য করার পরে, আমরা ছবির 'প্রস্থ' এবং 'উচ্চতা' সেট করেছি '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'।
উপসংহার:
আমরা এই নির্দেশিকায় চিত্রগুলিকে বিশদভাবে যুক্ত করার ধারণাটি অন্বেষণ করেছি এবং মার্কডাউনে কীভাবে চিত্রের আকার পরিবর্তন করতে হয় তাও আমরা অনুসন্ধান করেছি। আমরা মার্কডাউনে ছবিগুলি যুক্ত করেছি এবং “ ” ট্যাগের সাহায্যে তাদের আকার পরিবর্তন করেছি এবং মার্কডাউনে কীভাবে এই সব করতে হয় তা দেখিয়েছি। আমরা সংখ্যার পাশাপাশি শতাংশে প্রস্থ এবং উচ্চতার মান রেখে চিত্রের আকার পরিবর্তন করেছি। মার্কডাউনে চিত্রের আকার আপডেট বা পরিবর্তন করার জন্য আমরা “
” ট্যাগের স্টাইল বৈশিষ্ট্যটিও ব্যবহার করেছি।