تغییر سایز عکس‌ها در 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 پیکسل خواهد بود. در این حالت ارتفاع بصورت خودکار تغییر می‌کند و تصویر صدمه نمی‌بیند.

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

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

اشتراک گذاری با دوستان