تگ img در HTML

  /  فرانت اند   /  HTML   /  تگ img در HTML

با استفاده از تگ img در HTML میتوانید یک تصویر را در سند وارد و تعریف کنید.

مثال

<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="متین برونسی | Matin Boronsi" width="100%" height="500">


تعریف و کاربرد

از تگ img در HTML برای جاسازی تصویر در سند استفاده می شود.

تصاویر از نظر فنی در یک سند درج نمی شوند ، بلکه تصاویر پیوند داده می شوند.

تگ <img> در HTML یک فضای نگهداری برای تصاویر ارجاع داده شده می باشد.

تگ <img> دو ویژگی ضروری و لازم دارد:

  • src : در این خاصیت آدرس تصویر را مشخص میکنیم.
  • alt : در این ویژگی یک متن در رابطه با تصویر قرار میدهیم ، که به هر دلیلی اگر تصویر قابل نمایش نبود این متن به نمایش در می آید.

توجه: همیشه عرض width و ارتفاع height تصویر را مشخص کنید ، در غیر این صورت تصویر با سایز اصلی و پیش فرض خودش در سند به نمایش در می آید و بیشتر اوقات این موضوع فرم و قالب صفحه را بهم می زند.

نکته: برای بازکردن مستقیم تصویر درون عنصر <img> در یک سند دیگر ، میتوانید آدرس تصویر را در تگ <a> قرار دهید.


پشتیبانی مرورگر ها

عنصر
<img>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیح
alttextمتن جایگزین را برای یک تصویر مشخص می کند ، در صورتی که به هر دلیل تصویر قابل نمایش نباشد این متن به نمایش در می آید
crossoriginanonymous
use-credentials
اجازه نمایش تصاویر در canvas از طریق دسترسی متقابل سایت مبدأ را می دهد
heightpixelsارتفاع تصویر را مشخص می کند
ismapismapتصویری را به عنوان نقشه تصویری سمت سرور مشخص می کند
loadingeager
lazy
مشخص می کند که آیا مرورگر باید بلافاصله یک تصویر را بارگیری کند یا تا زمان تحقق برخی شرایط ، بارگذاری تصاویر را به تعویق بیندازد
longdescURLURL را برای شرح دقیق یک تصویر مشخص می کند ، آدرسی که در رابطه با تصویر توضیحات بیشتری می دهد
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
مشخص می کند که از کدام اطلاعات مراجعه کننده هنگام واکشی یک تصویر استفاده شود
sizessizesاندازه تصویر را در حالت های مختلف مشخص می کند
srcURLآدرس URL تصویر را برای نمایش آن مشخص می کند
srcsetURL-listلیستی از آدرس فایلهای تصویری را برای استفاده در شرایط مختلف مشخص می کند
usemap#mapnameتصویری را به عنوان نقشه تصویری سمت مشتری تعیین می کند
widthpixelsعرض یک تصویر را مشخص می کند

خواص عمومی

تگ img از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ img از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر img در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

img {
  display: inline-block;
}

مثال های بیشتر

در مثال زیر تصویر ما قابل نمایش نیست در نتیجه مقدار alt به نمایش در می آید:

<img src="#" alt="متین برونسی | Matin Boronsi" width="100%" height="500">


در مثال زیر ما روش اضافه کردن لینک ها به تصاویر خود را یاد میگیرم:

<a href="https://matinboronsi.ir/">
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="W3Schools.com" width="250" height="200">
</a>

<a href="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg">
<img src="https://www.bubbleslearn.ir/wp-content/uploads/2019/09/matin-boronsi-pc-main.jpg" alt="W3Schools.com" width="250" height="200">
</a>


در مثال زیر عناصر map و area را مورد بررسی قرار داده ایم ، و یک نقشه تصویر ایجاد کرده ایم که با کلیک برروی هر قسمت از تصویر شما به یک صفحه خاصی ارجاع داده می شوید:

<img src="https://www.bubbleslearn.ir/wp-content/uploads/2021/05/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://fa.wikipedia.org/wiki/%D8%B1%D8%A7%DB%8C%D8%A7%D9%86%D9%87">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://fa.wikipedia.org/wiki/%D8%AA%D9%84%D9%81%D9%86">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://fa.wikipedia.org/wiki/%D9%82%D9%87%D9%88%D9%87">
</map>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر