برچسب <img> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< مرجع HTML:تگ‌ها(تغییرمسیر از برچسب img)
پرش به ناوبری پرش به جستجو
تصویری را تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:display: inline-block;

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

چگونه یک تصویر را درج کنیم:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

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

یک برچسب <img> یک تصویر را در یک صفحهٔ اچ‌تی‌ام‌ال تعریف می‌کند.[۱]

برچسب <img> دو ویژگی لازم دارد: src و alt.

توجه: از نظر فنی، تصاویر در یک صفحه اچ‌تی‌ام‌ال درج نمی‌شوند، بلکه تصاویر در صفحه‌های اچ‌تی‌ام‌ال لینک می‌شوند. برچسب <img> یک فضای نگه‌داشته‌شده برای تصویر ارجاعی ایجاد می‌کند.

نکته: برای لینک‌دهی تصویر به یک سند دیگر، به سادگی برچسب <img> را درون یک برچسب <a> جای دهید. امتحانش کنید»

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

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<img> بله بله بله بله بله

ویژگی ها

ویژگی مقدار شرح
alt text یک متن alternate (در صورتی که تصویر بارگذاری نشود، این متن را نشان می‌دهد) برای تصویر مشخص می‌کند
crossorigin anonymous

use-credentials

اجازه می‌دهد تا تصاویر از سایت‌های ثالثی که اجازهٔ دسترسی بین‌مبداءای را می‌دهند، با بوم (canvas) استفاده شوند
height pixels ارتفاع یک تصویر را مشخص می‌کند
ismap ismap یک تصویر را بعنوان تصویر-نقشهٔ سمتِ سرور مشخص می‌کند
longdesc URL یک URL را به [صفحهٔ] شرح مفصل یک تصویر مشخص می‌کند
referrerpolicy no-referrer

no-referrer-when-downgrade

origin

origin-when-cross-origin

unsafe-url

مشخص می‌کند که از کدام ارجاع‌دهنده هنگام واکشی تصویر استفاده شود
sizes sizes اندازه‌های تصویر را برای طرح‌بندی‌های مختلف صفحات مشخص می‌کند
src URL URL تصویر را مشخص می‌کند
srcset URL استفاده از URL تصویر در موقعیت‌های مختلف را مشخص می‌کند
usemap #mapname یک تصویر را بعنوان تصویر-نقشهٔ سمتِ مشتری (سمت کلاینت) مشخص می‌کند
width pixels پهنای یک تصویر را مشخص می‌کند

ویژگی‌های سراسری

همچنین برچسب <img> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <img> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

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

مثال

تصویر را تراز کنید (با CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">


مثال

لبهٔ (border) تصویر را اضافه کنید (با CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">


مثال

حاشیهٔ (margins) چپ و راست را به تصویر اضافه کنید (با CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">


مثال

حاشیهٔ بالا و پایین را به تصویر اضافه کنید (با CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">


مثال

چگونه یک تصویر را از یک فولدر دیگر یا وب‌سایتی دیگر، درج کنیم:

<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">


مثال

چگونه یک هایپرلینک به تصویر اضافه کنیم:

<a href="https://www.w3schools.com">
<img src="w3html.gif" alt="W3Schools.com" width="100" height="132">
</a>


مثال

چگونه یک نقشهٔ تصویر با نقاط قابل کلیک ایجاد کنیم. هر ناحیه یک هایپرلینک است:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>


صفحات مرتبط

آموزش اچ‌تی‌ام‌ال: تصاویر اچ‌تی‌ام‌ال (HTML Images)

مرجع DOM اچ‌تی‌ام‌ال: شی تصویر (Image Object)

آموزش CSS: سبک‌دهی به تصاویر (Styling Images)

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

بیشتر مرورگرها عنصر <img> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

img {
  display: inline-block;
}


منابع آموزشی