آی تی کلوپ | ITCLOOP

روی نبض فناوری زندگی کنید

تغییر سایز عکس‌ها در HTML

تغییر سایز عکس‌ها در HTML

در این آموزش به شما نحوه تغییر سایز عکس‌ها در HTML را آموزش خواهیم داد با آی‌تی‌کلوپ همراه باشید.

زبان نشانه گذاری HTML از زبان‌های محبوب برنامه نویسان وب و طراحان وب بک اند و فرانت اند می‌باشد. یکی از مسائل مهم که در این زبان بکار می‌رود، مبحث عکس‌هاست که برنامه نویسان مکررا از تگ img برای عکس‌های استفاده می‌کنند. با استفاده از HTML می‌توانیم به عکس‌هایمان لینک بدهیم، انیمیشنی و محرک کنیم، سایز آن را تغییر داده و در سایت نمایش دهیم. در این آموزش قصد داریم نحوه تغییر سایز را بررسی کنیم.

تگ img
  • برای نمایش تصاویر از تگ img در html استفاده می شود.
  • تگ img دارای تگ بسته نمی باشد.
  • تگ img دارای یک ویژگی بنام src می باشد که آدرس و نام عکس را در آن قرار می دهیم.
  • از ویژگی alt زمانی استفاده می کنیم که آدرس اشتباه باشد یا تصویر نمایش داده نشود.
  • مثلا زمانی که نام فایل را اشتباه تایپ کنید یا چنین فایلی وجود نداشته باشد پیغامی که در alt قرار داده اید نمایش داده می شود.
<img src="a.jpg" alt="itcloop.ir image">.
تغییر اندازه عکس در html

در این بخش با تغییر اندازه عکس در html آشنا می شوید. در حالت عادی عرض و ارتفاع عکس یا تصویر ، در صفحات html ، همان حالت پیش فرض تصویر می‌باشد. یعنی اگر عرض عکس 200 پیکسل باشد همان اندازه خواهد بود. اما می‌توانیم عرض و ارتفاع را تغییر دهیم. با ویژگی width می توانیم اندازه عرض عکس را تغییر دهیم و با ویژگی height می توانیم ارتفاع تصویر را تغییر دهیم. در مثال زیر ما عرض تصویر را تغییر داده ایم و عرض آن هنگام نمایش در صفحه html ، 200 پیکسل خواهد بود. در این حالت ارتفاع بصورت خودکار تغییر می‌کند و تصویر صدمه نمی‌بیند.

<img src=="a.jpg" width="200">

در مثال زیر عرض عکس 200 پیکسل و ارتفاع آن 220 پیکسل خواهد بود.

همچنین ما می توانیم عرض و ارتفاع را با استفاده از css تغییر دهیم که در قسمت زیر توضیح خواهیم داد.

<img src="a.jpg" width="200" height="220">
نظرات: (۰) اولین کسی باش که برای این مطلب نظر می‌ده!
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی