ویژگی تصویر

تگ 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>بلهبلهبلهبلهبله

خواص (attributes)

خاصیتمقدارتوضیح
alttextمتن جایگزین را برای یک تصویر مشخص می کند ، در صورتی که به هر دلیل تصویر قابل نمایش نباشد این متن به نمایش در می آید.
crossoriginanonymous
use-credentials
اجازه نمایش تصاویر در canvas از طریق دسترسی متقابل سایت مبدأ را می دهد.
heightpixelsارتفاع تصویر را مشخص می کند.
loadingeager
lazy
مشخص می کند که آیا مرورگر باید بلافاصله یک تصویر را بارگیری کند یا تا زمان تحقق برخی شرایط ، بارگذاری تصاویر را به تعویق بیندازد.
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">



این قسمت/بخشی از محتوا مخفی شده است و فقط برای اعضای وب سایت قابل مشاهده می باشد، لطفاً با حساب کاربری وارد شوید.

آیا این مطلب برای شما مفید بود ؟

خیر
بله
بنر تبلیغاتی ج