تعریف و کاربرد
تگ <img> برای نمایش تصویر HTML است.
این تگ دارای چهار ویژگی مهم است:
- ویژگی src: برای مشخص کردن آدرس تصویر می باشد. (اجباری)
- ویژگی alt: برای مشخص کردن متن جایگزین تصویر است. اگر به هر دلیلی مرورگر نتواند عکس را نمایش دهد. متن جایگزین نمایش داده می شود.(اختیاری)
- ویژگی width: عرض تصویر را مشخص می کند.
- ویژگی height: ارتفاع تصویر را مشخص می کند.
نکات
نکته: برای اینکه نسبت عرض به ارتفاع تصویر خراب نشود. همیشه یک سمت تصویر (عرض یا ارتفاع) را مقداردهی کنید و اجازه دهید سمت دیگر به صورت خودکار مقدار دهی شود.
نکته: ویژگی width و height بر اساس واحد پیکسل مقداردهی می شود. در مثال زیر تصویر دارای عرض 500 پیکسل است.
<img src="/pic.jpg" width="500">نکته: می توانیم width و height را با CSS نیز مقداردهی کنیم. به مثال زیر توجه کنید:
<img src="/pic.jpg" style="width: 500px">نکته: زمانی که width و height با CSS مقداردهی شود، باید واحد مقدار را ذکر کنیم. مثلا در مثال بالا از px (پیکسل) استفاده کرده ایم.
نکته: با استفاده از تگ <embed> نیز می توان تصویر را نمایش داد ولی توصیه می شود از تگ <img> استفاده کنید.
سازگاری با مرورگر
| # | کروم | ادج | فایرفاکس | سافاری | اپرا |
|---|---|---|---|---|---|
| <img> |
ویژگی ها
| ویژگی ها | مقادیر | توضیحات |
|---|---|---|
| alt |
text
|
متن جایگزین را به جای عنصری که نمایش داده نمی شود، قرار می دهد. |
| height |
pixels
|
ارتفاع تگ های مربوطه در سمت راست را تعیین می کند. |
| ismap |
ismap
|
یک عکس را به عنوان نقشه در سرور مشخص می کند. |
| sizes |
sizes
|
اندازه و ابعاد منبع لینک را تعیین می کند. |
| src |
URL
|
منبع یا URL رسانه های صوتی و تصویری را تعیین می کند. |
| srcset |
URL-list
|
نشانی اینترنتی و یا همان لینک رسانه های صوتی و تصویری را در موقعیت های مختلف تعیین می کند. |
| usemap |
#mapname
|
یک تصویر را که به عنوان نقشه تصویری قرار است به کاربر نشان دهد را تعیین می کند. |
| width |
pixels
|
عرض عناصر مربوطه در سمت راست را تعیین می کند. |
ویژگی های سراسری
تگ <img> از ویژگی های سراسری HTML پشتیبانی می کند.
ویژگی های رویداد
تگ <img> از ویژگی های رویداد HTML پشتیبانی می کند.
استایل css پیش فرض
بیشتر مرورگر ها تگ <img> را با استایل پیشفرض زیر نمایش می دهند:
