آموزش ریسپانسیو با css | ریسپانسیو کردن تصاویر



visibility  
mode_comment   ۹

آموزش ریسپانسیو با css برای تصاویر در طراحی وب همیشه مسئله چالش بر انگیزی بوده پس همراه من باشید تا در این مقاله به شما آموزش ریسپانسیو کردن را آموزش دهم . میدونید که تصاویر همیشه یکی از بحث های چالش برانگیز در طراحی سایت های ریسپانسیو هستند پس در این مطلب میخوایم تگ <picture> که یه راه حل برای حل این مشکل تصاویر ریسپانسیو هست رو بررسی کنیم.

رایج ترین راه حل

معمولا هر سایت ریسپانسیوی رو که باز کنید، داخل کدهای css اون سایت، چنین چیزی رو میبینید:

این کد از max-width: 100% استفاده میکنه تا نذاره اندازه عرض تصویر بیشتر از عرض والدش بشه. اگر عرض والد کمتر از عرض تصویر بشه، عرض تصویر هم به همون نسبت کم میشه. height: auto هم باعث میشه تا متناسب با کم شدن اندازه عرض تصویر، ارتفاع تصویر هم کم بشه.

آموزش ریسپانسیو با css

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

آموزش ریسپانسیو با css

<picture> یکی از عناصر جدید html5 هست که به شما این امکان رو میده چند تگ source (که هر کدوم از این تگ ها شامل محل تصویر و شرطی که تحت اون شرط باید تصاویر بارگذاری بشه) رو برای picture قرار بدید.

با این روش میتونید یک تصویر کاملا متفاوت رو با توجه به دو حالت زیر بارگذاری کنید:

  • نتایج مدیاکوئری مثلا ارتفاع، عرض یا orientation دستگاه

  • تراکم پیکسلی

یعنی شما میتونید:

  • تصاویر با سایز مناسب، که باعث استفاده بهتر از پهنای باند میشه رو بارگذاری کنید
  • تصاویر مختلف بریده شده با ابعاد مختلف رو با توجه به تغییرات layout در عرض های مختلف بارگذاری کنید
  • تصاویر با رزولوشن بالاتر رو برای صفحه نمایش هایی با تراکم پیکسلی بالاتر بارگذاری کنید

آموزش ریسپانسیو با css

<picture> چگونه کار میکند؟

مراحل اساسی کار با <picture> :

  1. تگهای باز و بسته ی <picture></picture> رو بسازید.
  2. داخل این تگها، یه تگ <source> به ازای هر کوئری که میخواید اجرا بشه بسازید.
  3. صفت media که حاوی کوئریتون برای چیزهایی مثل ارتفاع، عرض یا orientation دستگاه هست رو به همین تگ source که ساختید اضافه کنید.
  4. صفت srcset حاوی نام تصویر مربوطه برای بارگذاری رو به همین تگ source اضافه کنید.
  5. اگر میخواید تصاویری رو برای صفحه نمایش هایی با تراکم پیکسلی متفاوت قرار بدید کافیه نام تصاویر دیگه رو هم به صفت srcset اضافه کنید. مثلا برای صفحه نمایش های رتینا
  6. مجددا تگ <img> رو هم اضافه کنید.

این مثال یه مثال ساده هست که اگر سایز صفحه نمایش کمتر از 768px بود، تصویر کوچک تر رو بارگذاری میکنه:

دقت کنید که سینتکس استفاده شده در صفت media دقیقا شبیه همون چیزی هست که ممکنه تاحالا در cssهاتون برای ساخت مدیاکوئری استفاده کرده باشید. میتونید دقیقا همون کوئری ها رو هم اینجا استفاده کنید، یعنی میتونید از max-width، min-width، max-height، min-height، orientation و ... استفاده کنید.

میتونید کوئری ای بنویسید که مثلا یه تصویر رو با توجه به عمودی یا افقی بودن دستگاه، بارگذاری کنید. خوبیش اینه که میتونید چند کوئری رو همزمان بنویسید. به مثال زیر توجه کنید:

کد بالا برای دستگاه هایی با سایز صفحه نمایش کمتر از 40em و در حالت افقی، تصویر smaller_landscape.jpg رو بارگذاری میکنه و برای دستگاه هایی با سایز بیشتر از 40em و در حالت افقی، تصویر default_landscape.jpg رو بارگذاری میکنه. همینطور برای سایز های کمتر از 40em و در حالت عمودی تصویر smaller_portrait.jpg و برای سایز های بیشتر از 40em و در حالت عمودی تصویر default_portrait.jpg رو بارگذاری میکنه.

اگر میخواید تصویری با یه رزولوشن دیگه رو برای صفحه نمایش هایی با تراکم پیکسلی بالا قرار بدید، میتونید این کار رو با اضافه کردن اسم تصویر دیگه به صفت srcset انجام بدید. مثلا کد زیر رو ببینید:

مدیا کوئری قبل از هر چیزی بررسی میشه پس میتونید تصویری که قراره برای سایز های مختلف صفحه نمایش بارگذاری بشه رو کنترل کنید. بعد نوبت تصویری هست که باید نشون داده بشه. در این کد، علاوه بر تصویر smaller.jpg، یه تصویر دیگه که سایزش دو برابر همین تصویر smaller.jpg هست یعنی smaller_retina.jpg رو برای صفحه نمایش های رتینا اضافه کردیم. بنابراین اگر صفحه نمایش از نوع رتینا باشه تصویر smaller_retina.jpg برای کاربر نشون داده میشه.

همین حالا از <picture> استفاده کنید

در حال حاضر <picture> در مرورگرهای کروم، فایرفاکس و اپرا پشتیبانی میشه. احتمالش هست در آینده، بقیه مرورگرها هم از <picture> پشتیبانی کنند، ولی این دلیل نمیشه که منتظر پشتیبانی کامل باشید. میتونید از Picturefill 2.0 استفاده کنید.

آموزش ریسپانسیو با css

بعد از دانلود picturefill.js میتونید خیلی راحت با استفاده از کد زیر، به پروژتون اضافش کنید:

البته یه روش دیگه برای بارگذاری این اسکرپت هست که بازدهی بیشتری هم داره؛ درموردش داخل مستندات خود picturefill توضیح داده شده میتونید خودتون بخونید.

با استفاده از این اسکریپت، <picture> همونطور که توضیح داده شد کار میکنه البته با کمی محدودیت که راجع بهش توضیح میدیم:

IE9

Picturefill با بیشتر ورژن های اینترنت اکسپلورر سازگاره (حتی اون قدیمیاش) ولی با IE9 مشکل داره 🙂 در واقع عنصرهای source که داخل تگ picture هستند رو نمیشناسه. برای حل این مشکل باید عناصر source رو داخل تگ video قرار بدید تا IE9 بتونه نشونشون بده. مثلا:

Android 2.3

اندروید 2.3 هم مثل اینترنت اکسپلورر 9 عنصرهای source داخل picture رو نمیشناسه. ولی صفت srcset رو وقتی برای تگ img استفاده میشه میشناسه. به همین خاطر توصیه میشه همیشه عنصر img رو همراه با صفت srcset استفاده کنید. ممکنه بعضی از مرورگرهای دیگه هم چنین مشکلی رو داشته باشند که با این روش حل بشه.

نیاز به جاوااسکریپت

هنگام استفاده از <picture> ، مرورگرهایی که از <picture> پشتیبانی نمیکنند و جاوااسکریپت در این مرورگرها غیرفعال هست، کاربران فقط متن alt رو میبینن. در واقع Picturefill 2.0 برای این نوع مرورگها که از <picture> پشتیبانی نمیکنند و جاوااسکریپتشون هم غیرفعاله، راه حلی ارائه نکرده چون اگر این کار رو میکرد، در مرورگرهایی که از <picture> پشتیبانی میکنند چندین تصویر نشون داده میشد. اگر هم میخواهید تصاویر زمانی که جاوااسکریپت غیرفعاله نشون داده بشه Picturefill 1.2 گزینه خوبیه.

پشتیبانی از media query

عنصر <picture> با مرورگرهایی که از مدیاکوئری css3 پشتیبانی میکنه به خوبی کار میکنه. خیلی از مرورگر های جدید هم از مدیا کوئری ها پشتیبانی میکنن. مرورگرهاییم که پشتیبانی نمیکنن مهم نیس 🙂 انقدر درصد کاربرانشون کمه که میشه نادیده گرفت.

درخواست های http اضافه

در مرورگرهایی که از srcset پشتیبانی میکنن ولی هنوز از picture پشتیبانی نمیکنن، این احتمال هست قبل از تشخیص تصویر مناسب از عنصر source ، تصویری که برای عنصر img اختصاص داده شده بارگذاری بشه.

البته این فقط یه مشکل موقتی هست و وقتی picture پیاده سازی بشه این مشکل هم حل میشه.

  • برای اطلاعات بیشتر راجع به picturefill 2.0 میتونید اینجا رو بخونید.
  • برای اطلاعات کامل راجع به تگ <picture> هم میتونید به سایت responsiveimages.org سر بزنید.

موفق باشید

متخصص اندروید
دوست داری از طریق برنامه نویسی کسب درآمد کنی؟ اگر می خوای با برنامه نویسی وب و موبایل کسب درآمد کنی، جایی استخدام شی و یا حتی اینکه درامد ارزی داشته باشی، حتما دوره های متخصص سون لرن رو یه نگاه بنداز : متخصص شو arrow_back
7Learn Experts
comment دیدگاه کاربران
مهدی اکرمی replyپاسخ

مطلب بسیار مفیدی بود .
خیلی ممنون از آموزش هاتون 😀

mm021 replyپاسخ

مرسی ♥ ♥ ♥ ♥ عالی بود ♥♥♥

m.yousefikia replyپاسخ

ممنون. مثل همیشه عالی و مفید

سجاد دریس replyپاسخ

خیلی عالی بود.

Irandroid gigfa com replyپاسخ

خیلی خوب بود ممنون از آموزشهاتون

محمد بابازاده replyپاسخ

ممنونم

ساغر replyپاسخ

من میخوام برای یک اسلاید شو ک تصاویر رو از داخل دیتابیس دریافت میکنه این خاصیت رو استفاده کنم ..همچنین ریسپانسیو را برای سه دستگاه تنظیم کرده ام…موبایل و تبلت و دستکتاپ
ممنون میشم راهنماییم کنید ک سایز تصاویر چطوری متناسب با کادر هر دستگاه تنظیم بشه
بابت مطالب مفیدتون هم کمال تشکر دارم

sajjad replyپاسخ

ممنونم
کاش یکم مبتدی تر توضیح میدادید تا کاملا مطلب رومتوجه بشیم با این حال 70 % قابل فهم بود
خیلی متشکر 🙂

omid hojaty replyپاسخ

سلام ببخشید من یک اسلایدر دارم .من میخوام وقتی اندازه صفحه رو کوچک میکنم اسلایدرم هم کوچیک بشه ( رسپانسیو ) . میشه راهنمایی کنید .

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :