এইচটিএমএল আমাদের ওয়েব পৃষ্ঠাগুলিতে ছবি ব্যবহার করতে এবং বিভিন্ন শৈলী প্রয়োগ করে তাদের আরও আকর্ষণীয় করে তুলতে দেয়। আপনি যদি ছবির আকৃতির অনুপাত পরিবর্তন করতে চান বা আপনার ছবি আপনার ওয়েব পৃষ্ঠার বিন্যাসের সাথে খাপ খায় না, আপনি এটির আকার পরিবর্তন করতে পারেন। এই উদ্দেশ্যে, আপনি ব্যবহার করতে পারেন ' প্রস্থ ' এবং ' উচ্চতা ' বৈশিষ্ট্য ' img ট্যাগ এই সম্পত্তি মান সহজে CSS পিক্সেল সেট করা যেতে পারে.

এই ম্যানুয়ালটিতে, আপনি HTML-এ চিত্রের আকার পরিবর্তন করার পদ্ধতি শিখবেন।

শুরু করার আগে, ইমেজটিকে HTML ফাইলে যোগ করতে হবে যার উপর ইমেজ রিসাইজ অপারেশন করা হবে।

কিভাবে HTML এ একটি ছবি এম্বেড করবেন?

HTML এ একটি ছবি যোগ করতে, নিম্নলিখিত সিনট্যাক্স ব্যবহার করুন:

উপরে উল্লিখিত সিনট্যাক্সের বর্ণনা নীচে বর্ণিত হয়েছে। দ্য ' img ” ট্যাগ দুটি বৈশিষ্ট্য ব্যবহার করে:

• • 'src' চিত্রের পাথ (URL) প্রদান করতে ব্যবহৃত হয়।
  • 'সবকিছু' চিত্রটি প্রদর্শিত না হলে বিকল্প পাঠ্য প্রদান করতে ব্যবহৃত হয়।

এইচটিএমএল

নীচের কোড দুটি div প্রতিনিধিত্ব করে. প্রথম ভাগে, আমরা আমাদের ওয়েব পৃষ্ঠার উপরের কেন্দ্রে একটি শিরোনাম যুক্ত করেছি ' HTML এ ছবির সাইজ

ট্যাগ ব্যবহার করে:

< div >
< কেন্দ্র >
< h1 > ছবির আকার ভিতরে এইচটিএমএল 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-এ চিত্রের আকার পরিবর্তনের জন্য উচ্চতা এবং ওজন বৈশিষ্ট্যগুলি ব্যবহার করার পদ্ধতি প্রদর্শন করেছে।