تگ 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)
| خاصیت | مقدار | توضیح |
|---|---|---|
| alt | text | متن جایگزین را برای یک تصویر مشخص می کند ، در صورتی که به هر دلیل تصویر قابل نمایش نباشد این متن به نمایش در می آید. |
| crossorigin | anonymous use-credentials | اجازه نمایش تصاویر در canvas از طریق دسترسی متقابل سایت مبدأ را می دهد. |
| height | pixels | ارتفاع تصویر را مشخص می کند. |
| loading | eager lazy | مشخص می کند که آیا مرورگر باید بلافاصله یک تصویر را بارگیری کند یا تا زمان تحقق برخی شرایط ، بارگذاری تصاویر را به تعویق بیندازد. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | مشخص می کند که از کدام اطلاعات مراجعه کننده هنگام واکشی یک تصویر استفاده شود. |
| sizes | sizes | اندازه تصویر را در حالت های مختلف مشخص می کند. |
| src | URL | آدرس URL تصویر را برای نمایش آن مشخص می کند. |
| srcset | URL-list | لیستی از آدرس فایلهای تصویری را برای استفاده در شرایط مختلف مشخص می کند. |
| usemap | #mapname | تصویری را به عنوان نقشه تصویری سمت مشتری تعیین می کند. |
| width | pixels | عرض یک تصویر را مشخص می کند. |
خواص عمومی
تگ img از خواص عمومی در HTML پشتیبانی می کند.
رویداد های عمومی
تگ img از رویداد های عمومی در HTML پشتیبانی می کند.
تنظیمات پیش فرض CSS
اکثر مرورگر ها عنصر img در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:
img {
display: inline-block;
}مثال های بیشتر
در مثال زیر تصویر ما قابل نمایش نیست در نتیجه مقدار alt به نمایش در می آید:
<img src="#" alt="متین برونسی | Matin Boronsi" width="100%" height="500">آیا این مطلب برای شما مفید بود ؟
پست های مرتبط
