عنصر img – عنصر تصویر در HTML

در این مقاله قصد داریم به شما نشان دهیم که چطور با استفاده از عنصر img تصویری را در صفحه وب خود به نمایش در بیاورید.

در html عکسها توسط تگ <img /> تعریف می شوند.

صفات عنصر img به شرح زیر می باشد :

src: نام فایل تصویر و یا آدرس تصویر می باشد.
alt: متن جایگزین (توضیح عکس)
height: ارتفاع عکس
width: عرض عکس

نحوه معرفی یک تصویر

<img src="url" />

url به محلی اشاره می کند که تصویر در آنجا قرار دارد.

مثال :

<img src="https://2sweb.ir/wp-content/uploads/Learning-HTML.jpg" />

مشخصه alt در عنصر img

خصوصیت alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای خصوصیت alt یک متن توصیفی است.

<img src="https://2sweb.ir/wp-content/uploads/Learning-HTML.jpg" alt="آموزش قرار دادن عکس در اچ تی ام ال" />

اگر مرورگر نتواند تصویری را بارگیری نماید، مشخصه alt به خواننده می گوید که آن را در صفحه از دست داده است، سپس مرورگر متن جایگزین را به جای آن نشان خواهد داد.

محل نمایش عکس یا مشخصه align در عنصر img

مشخصه ی align دارای مقادیر : top ، bottom و middle می باشد. که مشخص می کند عکس در کجا نمایش داده شود.

<h4>Image with default alignment (align="bottom"):</h4>
<p>This is some text. <img src="icon-2sweb.png" alt="2sweb-icon"> This is some text.</p>

<h4>Image with align="middle":</h4>
<p>This is some text. <img src="icon-2sweb.png" alt="2sweb-icon" align="middle" > This is some text.</p>

<h4>Image with align="top":</h4>
<p>This is some text. <img src="icon-2sweb.png" alt="2sweb-icon" align="top"> This is some text.</p>

خروجی :

Image with default alignment (align=”bottom”):

This is some text. This is some text.

Image with align=”middle”:

This is some text. This is some text.

Image with align=”top”:

This is some text. This is some text.

تغییر اندازه عکس

<p>
<img src="icon-2sweb.png" width="20" height="20"></p>

<p>
<img src="icon-2sweb.png" width="32" height="32"></p>

<p>
<img src="icon-2sweb.png" width="45" height="45"></p>

خروجی :