এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
 

এইচটিএমএল <img> ট্যাগ


<img> ট্যাগের ব্রাউজার সাপোর্ট



এলিমেন্ট Google Chrome Edge/IE Mozila Firefox Safari Opera
<img> সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন সকল ভার্সন




সংজ্ঞা ও ব্যবহার

এইচটিএমএল ডকুমেন্টে ইমেজ অন্তর্ভুক্ত করার জন্য <img> ট্যাগ ব্যবহার করা হয়। অর্থাৎ <img> ট্যাগ দ্বারা ইমেজকে বুঝানো হয়। <img> ট্যাগটিতে শুধুমাত্র এট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ নেই। src এট্রিবিউটের মধ্যে ইমেজের URL(ডিরেক্টরি) নির্ধারণ করা হয়।

<img> ট্যাগের দুটি আবশ্যক এট্রিবিউট রয়েছেঃ src এবং alt ব্যবহার করা হয়।

টেকনিক্যাললি এইচটিএমএল পেজের মধ্যে ইমেজ অন্তর্ভুক্ত করা যায় না। ইমেজকে এইচটিএমএল পেজে লিংক করা হয়। <img> ট্যাগ ইমেজের জন্য প্রয়োজনীয় জায়গা করে দেয়।

ইমেজের মাধ্যমে অন্য আরেকটি ডকুমেন্টের সাথে লিংক করতে <a> ট্যাগের ভিতরে <img> ট্যাগটি ব্যবহার করুন।



নিচের উদাহরণে দেখানো হলো কিভাবে এইচটিএমএল পেজে ইমেজ সংযুক্ত করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

  <img src="satt.png" alt="Satt Logo" height="100" width="100">

</body>
</html>

ফলাফল





এট্রিবিউট

নিচের টেবিলে <img> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ

এট্রিবিউট ভ্যালু বর্ণনা
align top
bottom
middle
left
right
এইচটিএমএল(৫)-এ সাপোর্ট করে না।
চারপাশের এলিমেন্টের উপর ভিত্তি করে <img> এলিমেন্টের alignment নির্ধারণ করে।
alt text ইমেজের জন্য একটি বিকল্প টেক্সট নির্ধারণ করে। কোন কারনে যখন ইমেজটি প্রদর্শিত না হবে তখন এটি বিকল্প হিসেবে প্রদর্শিত হবে।
border pixels এইচটিএমএল(৫)-এ সাপোর্ট করে না।
ইমেজের চারপাশের বর্ডারের প্রস্থ নির্ধারণ করে।
height pixels ইমেজ এর উচ্চতা নির্ধারণ করে।
hspace pixels এইচটিএমএল(৫)-এ সাপোর্ট করে না।
ইমেজের বাম এবং ডান পাশের স্পেস নির্ধারণ করে।
ismap ismap একটি ইমেজকে সার্ভার-সাইড ইমেজ-ম্যাপ হিসেবে নির্ধারণ করে।
longdesc URL ইমেজের বিশদ ব্যাখ্যা/বিবরণের জন্য একটি URL নির্ধারণ করে।
src URL ইমেজ এর সোর্স URL নির্ধারণ করে।
usemap #mapname একটি ইমেজকে ক্লাইন্ট-সাইড ইমেজ হিসেবে নির্ধারণ করে।
vspace pixels এইচটিএমএল(৫)-এ সাপোর্ট করে না।
ইমেজ এর উপরে এবং নিচে স্পেস নির্ধারণ করে।
width pixels ইমেজ এর প্রস্থ/width নির্ধারণ করে।


<img> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?

গ্লোবাল এট্রিবিউট ইভেন্ট এট্রিবিউট
সাপোর্ট করে সাপোর্ট করে


<img> ট্যাগের ডিফল্ট স্টাইল

অধিকাংশ ব্রাউজারেই <img> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ

img {
    display: inline-block;
  }


সম্পর্কিত পেজ