تگ img در HTML

قبلی بعدی

تصاویر برای زیبایی و درک بهتر مطالب سایت شما بسیار کاربردی هستند.

شما برای اینکه تصویری را در سایت خود قرار دهید باید از تگ img استفاده کنید.

این المان تگ بسته ندارد.

"تگ بسته ندارد" به این معنا است که <img></img> نوشته نمی شود.

ساختار تگ img به صورت زیر است:

تگ img به این صورت نوشته می شود :

<img>

ویژگی src در HTML

برای اینکه بتوانیم تصویری را نمایش دهیم باید از ویژگی src استفاده کنیم.

<img src="https://pnldev.com/pic.jpg">

مقداری که ویژگی src دریافت می کند آدرس تصویر است.

نکته: برای اطلاعات بیشتر درباره ی آدرس دهی به صفحه آدرس دهی HTML مراجعه کنید.

تگ img علاوه بر ویژگی src، ویژگی دیگری به نام alt یا متن جایگزین تصویر دارد.

ویژگی alt این امکان را می دهد تا در صورت لود نشدن تصویر، متن جایگزین را چاپ کند.

<img src="https://pnldev.com/picccc.jpg" alt="image">

برای اینکه بتوانید عرض و ارتفاع تصویر را مشخص کنید باید از دو ویژگی width و height استفاده کنید.

می توانید با ویژگی width عرض و با ویژگی height ارتفاع تصویر را تنظیم کنید.

<img src="https://pnldev.com/html.png" alt="image html" width="500" height="300">

به مثال زیر هم توجه کنید:

<img src="https://pnldev.com/pic.jpg" alt="image" width="400">

همان طور که در مثال بالا دیدید، در صورت تنظیم کردن ویژگی width ویژگی height هم به صورت خودکار تغییر کرد.

اگر طول و عرض (width و height) تصویر با یکدیگر متناسب نباشد (مانند نمونه کد زیر) عکس خراب و اصطلاحا hard crop می شود.

<img src="https://pnldev.com/pic.jpg" alt="image" width="400" height="700">

در تمرین زیر یک عکس را با استفاده از لینک زیر نمایش دهید :

برای اینکار باید از ویژگی src استفاده کنید.

از این آدرس برای اگسمپل استفاده کنید

https://pnldev.com/pic.jpg

مشاهده پاسخ

قبلی بعدی

توسعه دهندگان

احسان اسلامی