خانه / دوره آموزش مقدماتی HTML / قسمت هفدهم آموزش HTML – کار با عکس ها در صفحه

قسمت هفدهم آموزش HTML – کار با عکس ها در صفحه

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

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

فرض کنیم یک عکس با نام HTMLHomePage.jpg داریم و می خواهیم آنرا کوچکتر از اندازه اصلی آن نشان دهیم. تنها چیزی که باید بدانیم اندازه اصلی عکس است. اندازه عرض و ارتفاع عکس معمولاً با مقیاس پیکسل سنجیده میشود. عکس ما ۱۵۰ پیکسل عرض و ۷۵ پیکسل ارتفاع دارد. در زیر می توانید عکس را با اندازه های واقعی ببینید.

HTMLHomePage

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

<img src="HTMLHomePage.jpg" width=" " height=" ">

حالا کافی است اندازه مورد نظر را در بین دو دابل کوت ( ” ” ) وارد کنید. برای مثال من اندازه ۱۰۰ را برای عرض و ۵۰ را برای ارتفاع وارد می کنم . به صورت زیر :

<img src="HTMLHomePage.jpg" width="100" height="50">

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

مثلاً با عرض۲۰۰ و ارتفاع ۱۰۰ :

<img src="HTMLHomePage.jpg" width="200" height="100">

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

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

۷۷÷۱۳۷=۰٫۵۶۲
height÷۱۰۰=۰٫۵۶۲   —>   height=100×۰٫۵۶۲ —>  height=56.2

حال اگر من اندازه تصویر را با عرض ۱۰۰ پیکسل و ارتفاع ۵۶/۲ پیکسل تعریف کنم تصویری با همان تناسب تصویر اصلی به دست خواهیم آورد مانند زیر :

<img src="HTMLHomePage.jpg" width="100" height="56">

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

نقد و بررسی

User Rating: ۴٫۱۹ ( ۲ votes)

درباره ی آریـان پــور

سلام . آریــان پور هستم . از نویسندگان میکروپـدیا .. علاقه مــند به برنامه نویسی و طراحی وب و شبکه ! دیدگاه ها و نظرات شما دوستان بررسی میشه و باعث دلگرمـی برای نوشتن مطالب بهتر و به روزتر . در تماس باشید با : aryanpour [at] micropedia [dot] ir با مـا همراه باشید ..

همچنین ببینید

قسمت سیزدهم آموزش HTML – رنگ متن ها در صفحه

بعد از مدت ها به دلایل مشغله با قسمت سیزدهم آموزش HTML همراه شما همراهان …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پاسخ عبارت زیر را وارد کنید: *