• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

واکنشگرا کردن تصاویر (جلسه 3) : نیاز به img

0 271 ۵ فروردین ۹۵

.در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم

Responsive-Design

یکی از دلایل بزرگی که ما نیازمند راه حلهایی برای واکنشگرا کردن تصاویر هستیم اینه که المنت <img> ناکافی هست. این المنت فقط یک src داره و فقط میتونه یک آدرس تصویر رو در خودش قرار بده، در صورتی که ما در طراحی واکنشگرا به چند منبع و تصویر نیاز داریم.

مهم نیست که شما از چه روشی برای واکنشگرا کردن تصاویر استفاده میکنید. در هر روشی <img> اجباری هست و باید وجود داشته باشه.

المنت <img> برای همه راه حلهای inline ضروری و بحرانی هست. img رو میشه مانند یک جعبه دونست که بقیه راه حل ها و تکنیکهای دیگه به اون اضافه شده و یا بر روی اون تغییراتی ایجاد میکنن.img-required

در پایین بطور مثال ما از المنت picture و source استفاده کردیم و منابع مختلفی رو برای عکس انتخاب کردیم. میبینید که برای سایزهای بزرگتر از 650 پیکسل تصویر kitten-large.png و برای بزرگتر از 465 تصویر kitchen-medium و برای بقیه موارد تصویر kitchen-small لود و نمایش داده میشه. همچنین اگر مرورگر کاربر از المنت picture پشتیبانی نکنه، تصویر kitten-small که با استفاده از تگ img تعریف شده است لود میشه.

شما میتونین از Javascript هم استفاده کنید و تغییرات مربوط به ویژگی currentSrc مربوط به المنت img رو مشاهده کنید. در پایین یک کد اسکریپت ساده رو قرار میدم که با استفاده از اون میتونین این کار رو انجام بدین:

خروجی این کدهای بالا رو میتونین در این صفحه مشاهده کنید. برای تست کردن مرورگر خودتون رو تغییر سایز بدین و تغییرات رو با دقت مشاهده کنید.

چرا این قضیه مهمه؟

همونطور که دیدید تونستیم با استفاده از المنتهای source خصوصیت currentSrc مربوط به img رو تغییر بدیم و همچنین Javascript میتونه به این ویژگی دسترسی داشته باشه. پس با این کار مشکل تک src بودن المنت img برطرف میشه و میتونین بجای یک تصویر، چند تصویر رو تعریف کنید و هر کدوم در زمان خاصی لود بشن.

در بعضی مواقع فقط استفاده از المنت img کافی هست و میتونه نیازهای ما رو برطرف کنه:

  • سایتهای با عرض ثابت : اگر شما یک سایت دارید که واکنشگرا نیست و همچنین براتون مهم نیست که بر روی نمایشگرهای رتینا بخوبی نمایش داده بشه، المنت img برای شما کافیه و نیازی به المنتهای دیگه ندارید.
  • تفاوت اندک در حجم فایلها : برای بعضی از تصاویر تفاوت چندانی مابین حجم فایلها در سایزهای مختلف نیست. آیکونها و تصاویر کوچک و ... که اصلا با تغییر اندازه viewport تغییر اندازه لازم ندارن و به اندازه کافی هم کوچک هستن. در این موارد نیز میتونین تنها از img استفاده کنید.
  • استفاده از تصاویر برداری مانند SVG : اگر شما از تصاویر برداری مانند SVG استفاده میکنید، این تصاویر بدون اینکه به چند منبع نیاز داشته باشن، به هر سایزی تغییر اندازه داده میشن و کیفیتشونو از دست نخواهند داد.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram