img ট্যাগ

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

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

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

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

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

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

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

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

উদাহরণ

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

html<img src="monkey.png" alt="বানর">

Результат:

উদাহরণ

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

html<img src="monkey.png" width="200" alt="বানর">

Результат:

উদাহরণ

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

html<img src="monkey.png" height="100" alt="বানر">

Результат:

উদাহরণ

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

html<img src="monkey.png" height="100" width="300" alt="বানর">

Результат:

উদাহরণ

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

html<img src="" alt="বানর">

Результат:

আরও দেখুন