راهکاری جدید در ایجاد تصاویر رسپانسیو

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

توی این آموزش میخوام بهتون یاد بدم چجوری تصاویر خودتون رو به صورت واکنشگرا یا responsive توی صفحات وب قرار بدید.

روش اولی که به ذهن همه میرسه به صورت زیر هست:

در روش بالا بیشترین سایز عکس رو برابر با ۱۰۰ درصد قرار دادیم و ارتفاع عکس نیز با توجه به عرض عکس تنظیم خواهد شد. (مقدار auto این کار رو انجام خواهد داد.) با این روش ما یک عکس رو در همه ی سایزهای صفحه های نمایشگر نشون خواهیم داد , حالا میخواد صفحه موبایل باشه یا تلویزیون ۵۰ اینچ!

responsive_images_via_picture_tag

ما باید روشی رو پیدا کنیم که در صفحه های کوچیکتر عکسی با سایز کوچیکتر رو لود کنیم نه اینکه یه عکس با سایز بزرگ داشته باشیم و با css اندازه اون رو کم کنیم. استفاده از عکس های با سایز بزرگ در نمایشگرهای کوچیک فقط باعث میشه که پهنای باند کاربر حروم بشه!

روشی که من بهتون پیشنهاد میکنم استفاده از تگ picture است. ما با استفاده از این تگ تصاویری با اندازه های مختلف رو قرار میدیم که هر تصویر با توجه به اینکه سایز نمایشگر ما چقد است لود خواهد شد. خب روش کار به صورت زیر خواهد بود:

شما میتونید برای خاصیت media از تنظیمات مربوط به max-width , min-width , orientation , max-height , min-height استفاده کنید. برای اینکه بهتر متوجه بشید یه سری مثال براتون میارم.

خاصیت orientation دو مقدار landscape و portrait داره که برای گوشی ها و تبلت ها بیشتر کاربرد داره و هنگامی عمل میکنه که شما گوشی رو توی دست خودتون میچرخونید و از حالت عمودی به حالت افقی گوشی رو توی دستتون میگیرید.

دقت کنید که برای ادرس دهی عکس باید از خاصیت srcset استفاده کرد که یه عکس کاندید برای سایز های مختلف نمایشگر ایجاد میکنه و تنها وقتی عکس لود خواهد شد که شرط مربوط به media برقرار باشد.

در اخر هم از یه تگ img استفاده کردیم که اگه دستورات source در مرورگرهای قدیمی تر ساپورت نمیشد عکس ما با استفاده از تگ img نمایش داده بشه.

responsive_image_picture_tag

متاسفانه در مرورگر اینترنت اکسپلورر IE9 به پایین و همچنین اندروید ۲٫۳ به پایین تگ picture ساپورت نمیشود ولی شما میتونید از کتابخونه های جاوا اسکریپتی مانند picturefill.js استفاده کنید تا این مرورگرها نیز ساپورت های لازم رو انجام بدن. همچنین دوستانی که علاقه دارن با راه های بیشتری برای ایجاد کردن تصاویر رسپانسیو در صفحات وب آشنا بشن میتونن به اینجا مراجعه کنن.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟