فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

آموزش تگ IMG در HTML

تگ hgroup از چه چیز هایی تشکیل شده است | کاربرد تگ header چیست؟ | اجرای اصلی تگ head چیست؟ |
ذهن انسان محدودتی ندارد

قرار دادن عکس در HTML

از تگ img برای قرار دادن تصاویر در یک صفحه HTML استفاده می شود. قبل از استفاده از تگ img ، باید از وجود تصویر در اینترنت اطمینان حاصل کنید. سپس هنگام استفاده از تگ img به مکان آن تصویر مراجعه می کنید.

نوشتن تک img در HTML

تگ img به صورت <img src = “” alt = “”> نوشته می شود (بدون برچسب انتهایی) با URL تصویر بین دو نقل قول از ویژگی src درج شده است.

از ویژگی srcset همچنین می توان به منظور تعیین تصاویر مختلف برای استفاده در موقعیت های مختلف (به عنوان مثال نمایشگرهای با وضوح بالا ، مانیتورهای کوچک و غیره) استفاده کرد. اگر عکس باز نشود ، مقدار مشخصه alt ظاهر می شود.

ویژگی alt متن جایگزینی را برای کاربرانی که قادر به مشاهده تصویر نیستند فراهم می کند. برخی از دلایلی که چرا کاربران نمی توانند تصویر را مشاهده کنند ممکن است دارای اتصال اینترنت کند باشد ، آنها اختلال بینایی دارند و از نرم افزار تبدیل متن به گفتار استفاده می کنند ، به دلایلی تصویر بارگیری نمی شود و غیره توجه داشته باشید که ویژگی alt یک ویژگی لازم و مهم است.

<img src="myimage.jpg" alt="My Image">

همچنین می توانید ابعاد تصویر را با استفاده از ویژگی های عرض و ارتفاع ارائه دهید.

<img 
	src="myimage.jpg" 
	alt="My Image"
	width="100px"
	height="50px">

مثال ها

استفاده ساده از تگ

<img src="{ادرس عکس شما }" alt="{متن جایگزین شما}">

استفاده از عرض و ارتفاع در نمایش عکس


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

در این مثال ، ما مقیاس تصویر را کوچکتر خواهیم کرد (برای اهداف نمایش) ، اما این توصیه نمی شود. بهتر است ابتدا تصویر را با استفاده از نرم افزار ویرایش تصویر (یعنی قبل از بارگذاری آن در اینترنت) مقیاس بندی کنید – به طوری که برای شروع اندازه درستی باشد. با این کار حجم پرونده کاهش می یابد. مقیاس گذاری آن با استفاده از HTML باعث کاهش اندازه پرونده نمی شود – از همان پرونده (بزرگتر) استفاده می کند و به راحتی اندازه آن را در مرورگر تغییر می دهد.

<img src="{ادرس غ=عکس شما }" width="100px" height="75px" alt="{متن جایگزین شما }">

طراحی ریسپانسیو

اگر وب سایت شما نیاز به نمایش در چندین صفحه نمایش بزرگ دارد (به عنوان مثال تلفن همراه ، تبلت ، رایانه رومیزی ، لپ تاپ و غیره) ، ممکن است متوجه شوید که تصاویر شما برای برخی از دستگاه ها بسیار بزرگ است. این امر به ویژه اگر از ویژگی های عرض و ارتفاع برای تنظیم ابعاد یک تصویر بزرگ استفاده کنید ، درست خواهد بود. در اینجا دو روش برای مقابله با این وضعیت وجود دارد.

CSS یک ترفند استفاده از ویژگی CSS-max-width برای تعیین حداکثر عرض برای تصویر ۱۰۰٪ است. با تعیین حداکثر عرض ، شما به وضوح عرض واقعی را تعیین نمی کنید. شما به سادگی به مرورگر می گویید که از پهنای تعیین شده – ۱۰۰٪ بزرگتر نباشد. در این حالت ، اگر ۱۰۰٪ برای صفحه نمایش بزرگ باشد ، مرورگر هنوز باید اندازه تصویر را کاهش دهد.

مثل این:

<img src="https://2050c.com/wp-content/uploads/2020/06/logo-big-1593520741.29.png" style="max-width:100%;"
    alt="">
    

ویژگی های srcset & sizes در تگ img

ویژگی های srcset و اندازه ها در HTML5 برای مقابله با مسئله صفحه نمایش ها و رزولوشن های مختلف معرفی شده اند. این یک گام فراتر از یک راه حل خالص CSS است ، زیرا به شما اجازه می دهد مشخص کنید از چه تصاویری در موقعیت های مختلف استفاده کنید (به عنوان مثال نمایشگرهایی با وضوح بالا ، مانیتورهای کوچک و غیره).

ویژگی srcset ویژگی srcset لیستی از URL ها را با گاما از هم جدا می کند ، که به صورت اختیاری با یک توصیف کننده عرض یا یک توصیف کننده تراکم پیکسل ترکیب می شود. هر URL به طور معمول یک تصویر را نشان می دهد اما در اندازه یا برش متفاوت است. در اینجا مثالی از آنچه ممکن است هنگام استفاده از توصیف کننده های عرض به نظر برسد ، آورده شده است:

<img 
     src="image-small.jpg" 
     srcset="image-medium.jpg 800w, 
             image-large.jpg 1200w" 
     alt="Sample image">

و در اینجا مثالی آورده شده است که از توصیف کننده های تراکم پیکسل استفاده می کند:

<img 
     src="image-small.jpg" 
     srcset="image-medium.jpg 1x, 
             image-large.jpg 2x" 
     alt="Sample image">

هنوز باید از ویژگی src استاندارد برای تهیه نمایندگی های کاربری که از ویژگی srcset پشتیبانی نمی کنند استفاده کنید. در حقیقت ، مشخصات HTML بیان می کند که هنگام استفاده از تگ img باید ویژگی src را نیز در آن بگنجانید. اندازه ها ویژگی اندازه ها به شما امکان می دهد اندازه های مختلف تصویر را برای صفحه آرایی های مختلف تعیین کنید. مثال:

<img 
     src="image-small.jpg" 
     srcset="image-medium.jpg 200w, 
             image-large.jpg 400w",
             sizes="80vw"
     alt="Sample image">

بسته به فضای موجود برای تگ img ، می توانید از کوئری های رسانه برای تعیین لیستی از مقادیر عرض استفاده کنید.

مثال:

<img 
     src="image-small.jpg" 
     srcset="image-medium.jpg 800w, 
             image-large.jpg 1200w",
             sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="Sample image">

تصویر لینک داده شده

می توانید با قرار دادن تگ img در داخل تگ a تصویر خود را به صفحه وب دیگری پیوند دهید.

مثل این:

<a href="  " target="_blank">
    <img src="   " style="max-width:100%;" alt="">
</a>

عکس نقشه در تگ img

برای ایجاد نقشه تصویری می توانید از برچسب img همراه با برچسب area و map استفاده کنید. نقشه های تصویری ، یک تصویر را قادر می سازد تا به چندین صفحه پیوند دهد. می توانید اشکال مختلفی را برای منطقه “کانون گرم” نیز تعیین کنید. مثال زیر این را نشان می دهد (برای دیدن اینکه کجا پیوند می رود روی هر کشور کلیک کنید). برای اطلاعات بیشتر در مورد نقشه های تصویر ، به برچسب map مراجعه کنید.

<img src="   " width="200" height="142" alt=""
    usemap="#aus-nz">

<map name="aus-nz">
    <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" href="#"
        target="_blank" alt="Australia">
    <area shape="poly" coords="180,85,200,98,167,142,157,138" href="#"
        target="_blank" alt="New Zealand">
</map>
ویژگی توضیحات
altمتن جایگزین. این متنی را مشخص می کند که در مواردی که مرورگر / عامل کاربر نتواند تصویر را ارائه دهد ، مورد استفاده قرار گیرد.
srcآدرس عکس را مشخص میکند.
srcsetلیستی از تصاویر با ویرگول برای استفاده در موقعیت های مختلف (به عنوان مثال ، نمایشگرهای با وضوح بالا ، مانیتورهای کوچک و غیره). هر URL تصویر را می توان به صورت اختیاری با یک فضای خالی و یک توصیف کننده دنبال کرد. توصیف کننده ، در صورت وجود ، می تواند یکی از موارد زیر باشد: توصیف کننده عرض (یک عدد صحیح مثبت که مستقیماً توسط w دنبال می شود). توضیح دهنده عرض بر اساس اندازه منبع داده شده در مشخصه اندازه ها برای محاسبه تراکم پیکسل موثر تقسیم می شود. توصیف کننده تراکم پیکسل (یک عدد شناور مثبت که به طور مستقیم x دنبال می شود).
sizesاندازه تصویر بین نقاط شکست.
crossoriginاین ویژگی یک ویژگی تنظیمات CORS است. CORS مخفف Cross-Origin Resource Sharing است. هدف از ویژگی crossorigin این است که به شما اجازه می دهد درخواست های CORS را برای داده های واکشی شده عنصر پیکربندی کنید. مقادیر برای ویژگی crossorigin برشمرده شده است.

مقادیر احتمالی:

anonymous : درخواستهای CORS متقابل برای این عنصر ، پرچم اعتبارنامه را تنظیم نمی کنند. به عبارت دیگر ، هیچ تبادل اعتبار کاربر از طریق کوکی ها ، گواهینامه های SSL سمت مشتری یا تأیید اعتبار HTTP انجام نخواهد شد.

use-credentials : درخواستهای CORS متقابل برای این عنصر ، پرچم اعتبارنامه را تنظیم می کنند.

اگر این ویژگی مشخص نشده باشد ، از CORS به هیچ وجه استفاده نمی شود. یک کلمه کلیدی نامعتبر و یک رشته خالی به عنوان مقدار ناشناس استفاده می شود.
ismapبرای نقشه های تصویری. به تک map میرود
usemapبرای نقشه های تصویری. به تک map میرود
widthعرض تصویر را مشخص می کند.
heightارتفاع تصویر را مشخص میکند.
referrerpolicyخط مشی ارجاع برای واکشی که توسط این عنصر آغاز شده است.
longdescنشانی اینترنتی که تصویر را توصیف میکند اراعه میدهد.
decodingروش ارجح برای رمزگشایی این تصویر را نشان می دهد. اگر این ویژگی وجود داشته باشد ، باید یک نکته رمزگشایی برای تصویر باشد. مقدار پیش فرض مقدار مشخص شده و پیش فرض مقدار نامعتبر هر دو حالت خودکار است.
loadingاین یک ویژگی بارگذاری تنبل است. هدف آن نشان دادن خط کشی بارگیری تصاویری است که خارج از نمای نمایش نیستند. مقادیر احتمالی:

lazy : برای به تعویق انداختن واکشی منبع تا زمان تحقق برخی شرایط استفاده می شود.

eager : برای واکشی فوری یک منبع استفاده می شود. (حالت پیش فرض )

دیدگاه‌های نوشته