تنظیم نحوه نمایش عکس در صفحه

اگر شما یک عکس دارید که می خواهید از آن استفاده کنید اما اندازه آن عکس اندازه مورد نظر شما نیست. مکن است عکس به قدری بزرگ باشد که تمام فضای صفحه را بگیرد یا شما اندازه ای بزرگتر از اندازه فعلی عکس را بخواهید.

شما می توانید اندازه عکس را تغییر دهید. این کار را می توانید با افزودن شناسه های width (برای عرض عکس) و height (برای ارتفاع عکس) به تگ img انجام دهید. به یک مثال در این مورد توجه کنید:

فرض کنیم یک عکس با نام learn_html.gif داریم و می خواهیم آنرا کوچکتر از اندازه اصلی آن نشان دهیم. تنها چیزی که باید بدانیم اندازه اصلی عکس است. اندازه عرض و ارتفاع عکس معمولاً با مقیاس پیکسل سنجیده میشود. عکس ما 137 پیکسل عرض و 77 پیکسل ارتفاع دارد. در زیر می توانید عکس را با اندازه های واقعی ببینید.

learn html with neopersia.org

حالا می خواهیم شناسه های width و height را در تگ عکس وارد کنیم. تگ ما به این صورت در می آید:

<img src="learn_html.gif" width=" " height=" ">

حالا کافی است اندازه مورد نظر را در بین دو دابل کوت ( " " ) وارد کنید. برای مثال من اندازه 100 را برای عرض و 50 را برای ارتفاع وارد می کنم . به صورت زیر:

<img src="learn_html.gif" width="100" height="50">

در زیر می توانید عکس را پس از تغییر اندازه مشاهده کنید:

learn html with neopersia.org

 

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

مثلاً با عرض200 و ارتفاع 100:

<img src="learn_html.gif" width="200" height="100">
learn html with neopersia.org

 

همانطور که می بینید اندازه عکس بزرگتر از اندازه واقعی شد:

 

همانطور که ممکن است متوجه شده باشید در تصاویری که با این روش تغییر اندازه پیدا می کنند اگر به نسبت بین عرض و ارتفاع عکس رعایت نشود ممکن است تناسب عکس به هم بخورد. مثلاً تصویر بیش از حد کشیده به نظر برسد و...

اگر بخواهید تصاویر با همان نسبت قبلی تغییر اندازه پیدا کنند باید نسبت بین عرض تصویر و ارتفاع آن را به دست آورید مثلا وقتی من مو خواهم تصویری با عرض 100 پیکسل داشته باشم می توانم به این صورت ارتفاعی را که در آن تناسب عکس به هم نمی خورد پیدا کنم:

77÷137=0.562
height÷100=0.562   --->   height=100×0.562 --->  height=56.2

حال اگر من اندازه تصویر را با عرض 100 پیکسل و ارتفاع 56/2 پیکسل تعریف کنم تصویری با همان تناسب تصویر اصلی به دست خواهیم آورد مانند زیر:

<img src="learn_html.gif" width="100" height="56">
learn html with neopersia.org

 

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

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


نظرات بازدید کنندگان
Thu, 23 Apr 2009 11:56:58 +0430 نویسنده : Afshin
hi!
site khoooooobi darid , badak nist.....................
 
Mon, 16 Mar 2009 15:55:41 +0330 نویسنده : میکایل
من از بلاگر استفاده می کنم و هر عکسی را (با هر سایزی) که برای پروفایلم قرار می دهم در یک اندازه ثابت نمایش داده می شود. چگونه می توانم عکسم در اندازه بزرگتر نمایش دهم؟

هر عکسی را با هر اندازه ای در هیدر وبلاگم قرار می دهم وبلاگ به هم میخورد. چگونه می توانم تصویری با طراحی خودم بجای هیدر وبلاگم قرار دهم؟

ممنونم.
 
Tue, 30 Dec 2008 08:44:31 +0330 نویسنده : بهار
سلام
با تشكر ازشما
من وقتي عكس اضافه مي كنم فقط سمت چپ نشون ميده
اگه بخوام عكسو پايين يا بالا يا چپ و راست تغيير بدم بايد چه كاري انجام بدم
 
Sat, 04 Oct 2008 16:41:13 +0330 نویسنده : saharasemani
سلام
میشه بگید تو چه برنامه ای ما می توانیم این کار را انجام دهیم و یا مثلا یک عکس را به کد تبدیل کنیم ؟
 
Sat, 27 Sep 2008 02:54:24 +0330 نویسنده : hamid
salam dostan besyar kare galeb va mofidi hast
movafagh bashid
 
Thu, 25 Sep 2008 12:29:34 +0330 نویسنده : vahid
thank you!!!!!!!!!!111