img ট্যাগ

img ট্যাগ একটি ছবি তৈরি করে। ছবির পথ src অ্যাট্রিবিউটে নির্দিষ্ট করা হয়। বন্ধকারী ট্যাগ প্রয়োজন হয় না।

অ্যাট্রিবিউটসমূহ

অ্যাট্রিবিউট	বিবরণ
src	ছবির পথ নির্ধারণ করে। বাধ্যতামূলক অ্যাট্রিবিউট।
alt	বিকল্প টেক্সট, যা ছবিটি না পাওয়া গেলে এর পরিবর্তে দেখানো হবে (উদাহরণস্বরূপ, এর পথ ভুলভাবে নির্দিষ্ট করা হলে)। বাধ্যতামূলক অ্যাট্রিবিউট। এটি অনুপস্থিত থাকলে ভ্যালিডেটর (যে প্রোগ্রাম HTML বা CSS-এর সঠিকতা পরীক্ষা করে) সতর্ক করবে।
width	ছবির প্রস্থ, পিক্সেলে (এই ক্ষেত্রে পরিমাপের একক উল্লেখ করা হয় না) বা ছবির প্যারেন্টের শতকরা হিসাবে।
height	ছবির উচ্চতা, পিক্সেলে (এই ক্ষেত্রে পরিমাপের একক উল্লেখ করা হয় না) বা ছবির প্যারেন্টের শতকরা হিসাবে।

সূক্ষ্ম বিষয়

যদি ছবির জন্য প্রস্থ বা উচ্চতা কোনটিই নির্ধারিত না থাকে - ছবিটির তার আসল আকার থাকবে। যদি উচ্চতা নির্ধারিত থাকে - ছবিটি নির্ধারিত উচ্চতার হবে, এবং প্রস্থ অনুপাতে সামঞ্জস্য হবে যাতে এর অনুপাত বিকৃত না হয়।

যদি শুধুমাত্র প্রস্থ নির্ধারিত থাকে - একইভাবে, ছবিটি উচ্চতায় সামঞ্জস্য করবে যাতে অনুপাত বজায় থাকে।

যদি প্রস্থ এবং উচ্চতা উভয়ই নির্ধারিত থাকে - ছবির অনুপাত বিকৃত হতে পারে (বা নাও হতে পারে, আপনি যেমন অনুমান করেন)। যদি প্রস্থ বা উচ্চতা (বা উভয়ই একসাথে) আসলের চেয়ে বেশি হয় - ছবিটি বড় হবে, কিন্তু গুণমান হারাবে।

অ্যাট্রিবিউটে (CSS এর মাধ্যমে নয়) ছবির প্রস্থ এবং উচ্চতা নির্ধারণ করার পরামর্শ দেওয়া হয় - এই ক্ষেত্রে ব্রাউজার দ্রুত ছবি লোড করবে - তার জন্য প্রতিটি ছবি পাওয়ার পরে এর আকার গণনা করার প্রয়োজন নেই।

প্রয়োজন ছাড়া ছবির আসল আকার কমানো উচিত নয়। উদাহরণস্বরূপ, ছবির আসল আকার 1000 বাই 1000 পিক্সেল, এবং আপনি এটিকে 100px প্রস্থ নির্ধারণ করলেন। এই ক্ষেত্রে স্ক্রিনে ছবিটি 100 পিক্সেল দেখাবে, তবে পুরো হাজার পিক্সেলের আকার বহন করবে এবং সেই অনুযায়ী, লোড হতে অনেক বেশি সময় নেবে।

উদাহরণ

আসুন ওয়েবসাইটে একটি ছবি যোগ করি এবং height এবং width অ্যাট্রিবিউট নির্ধারণ করি না। ছবিটির তার আসল আকার থাকবে:

:

উদাহরণ

আসুন ছবিতে width অ্যাট্রিবিউট ব্যবহার করে প্রস্থ যোগ করার চেষ্টা করি, এই সময় উচ্চতা অনুপাত বজায় রাখার জন্য সামঞ্জস্য করা উচিত:

:

উদাহরণ

এখন আসুন ছবিতে height অ্যাট্রিবিউট ব্যবহার করে উচ্চতা যোগ করি, প্রস্থ এই সময় ছবির অনুপাত বজায় রাখার জন্য সামঞ্জস্য করবে:

:

উদাহরণ

আসুন একই সাথে ছবিতে উচ্চতা এবং প্রস্থ উভয়ই যোগ করি। এই সময় ছবির অনুপাত বিকৃত হওয়া উচিত (অগত্যা নয়, তবে এই ক্ষেত্রে উচ্চতা এবং প্রস্থ এমনভাবে নির্বাচন করা হয়েছে যে অনুপাত বিকৃত হয়):

:

উদাহরণ

আসুন ছবির জন্য ভুল পথ নির্ধারণ করি (সরলতার জন্য এটি খালি রাখি)। ছবির পরিবর্তে আমরা alt অ্যাট্রিবিউটের বিষয়বস্তু দেখব (মনে হয় যে এটি সাধারণ টেক্সট - কিন্তু এটি কপি করার চেষ্টা করুন - আপনার কিছুই হবে না, এটি একটি ছবির মতো টেনে নেওয়া হবে):

:

আরও দেখুন