تصاویر وب سایت را فیت کنید!

تصاویر وب سایت را فیت کنید!
مطمئنا به عنوان یک فرانت اندکار از اهمیت این موضوع آگاه هستید که تصاویر به کار رفته در وب سایت یکی از مهمترین تاثیرات رو روی کاربران و بازدیدکنندگان وب سایت داره و یکی از مشکلاتی که باهاش روبرو هستیم سایز تصاویری هست که روی وبسایت آپلود میشن، در اوایل کار که خودمون تصاویر رو آپلود می کنیم میتونیم تصاویر وب سایت رو در سایزهایی مشخص روی وبسایت آپلود کنیم و زیبایی وب سایت رو حفظ کنیم.
اما مشکل از اینجا شروع میشه که شما پروژه رو تحویل مشتری میدید و خودش باید تصاویر مطالب وب سایت رو آپلود کنه و اکثرا در ۹۰ درصد اوقات مشتری نمیتونه و دانش این موضوع رو نداره که سایز تصاویر رو ست کنه و تصاویری با رزولوشن بالا و سایز مناسب قرار بده و شما به عنوان یک فرانت اندکار حرفه ای باید پیش بینی این حالت رو داشته باشید و اجازه ندهید  سایز تصاویر از حدی معمول بزرگتر بشه و باعث به هم ریختن دیزاین وب سایت بشه.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

برای رفع این مشکل میتونید که سایزی مشخص به تصاویر بدید و بر اون اساس برای کاربر تعریف کنید که طبق همون سایز تصاویر رو روی وب سایت آپلود کنه و یا با استفاده از کدهای جاوااسکریپت یکسری راهکار ارائه دهیم smiley
اما خوشبختانه با خاصیتهای جدید css3 امکانی فراهم شده که بدون همه این دغدغه ها تصاویر رو فیت کنیم.

object-fit

این ویژگی تعریف میکنه المانی که داریم چگونه نمایش داده بشه، برای مثال تصویری که در صفحه داریم به چه نحوی به عرض و ارتفاع کانتنت باکس جواب بده و به نحو احسن نمایش داده بشه؟!
این ویژگی برای تصاویر، ویدئو و ترکیبی با ویژگی  object-positionاستفاده می شود که در ادامه مقاله در این مورد صحبت خواهیم کرد.

Object-fit  میتونه با یکی از 5 مقدار زیر مقداردهی بشه :

  1. fill  : مقدار پیشفرضه که تصویر رو صرف نظر از نسبت عرض و ارتفاع آن، به اندازه ی کانتنت باکس کاملا فیت میکنه.
  2. contain : سایز تصویر رو با رعایت نسبت تصویر و جلوگیری از دفرمه شدن به اندازه کانتنت باکس افزایش یا کاهش خواهد داد. در این حالت ممکنه تصویر کاملا با کانتنت باکس فیت نشه و نسبت تصویر حفظ بشه.
  3. cover : در این حالت تصویر کاملا کانتنت باکس رو پر میکنه با رعایت نسبت تصویر و حفظ کیفیت آن ، در این حالت تصویر کراپ و بر اساس سایز کانتنت باکس فیت خواهد شد. در این حالت معمولا لازمه از object-position هم استفاده کنیم.
  4. none : در این حالت تصویری که داریم سایز والدش رو نادیده میگیره و در سایز اصلی خودش نمایش داده خواهد شد.
  5. scale-down : در این حالت تصویر مقایسه ای بین حالتهای none و contain رو انجام میده و به صورت سفارشی سایز کوچکتر رو انتخاب خواهد کرد.
برای مثال اگر ما بخواهیم برای cover  تصویر را تنظیم کنیم به صورت زیر خواهد بود :
img { 
   height: 120px; 
}
.cover { 
    width: 260px; 
    object-fit: cover; 
}
که به صورت زیر نتیجه را می بینیم :








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



حالا که با مفهوم و حالتهای مختلف Object-fit  آشنا شدید حیلی وقتها استفاده به تنهایی آن کمی استایل و کار ما رو به هم میریزه و لازمه بخشی از تصویر که میخواهیم نمایش داده بشه را با Object-position مشخص کنیم.
با بررسی دقیق حالتهای Object-position در نمونه زیر می توانید تفاوت هر حالت را به طور کامل درک کنید و تشخیص دهید از کدام حالت در پروژه هاتون استفاده کنید :




امیدوارم مفید واقع شده باشه .
شاد باشید :)

 

من میکائیل اندیشه هستم که از سال ۲۰۱۱ وارد حوزه برنامه نویسی و طراحی وب شدم، ابتدا با زبان‌ c++ در رشته تحصیلیم ( مهندسی فناوری اطلاعات ) آشنا شدم و پس از آن وارد طراحی وب سمت کلاینت ( Front-End ) شدم و پس از چند سال کار و تجربه در این حوزه از اواسط ۲۰۱۷ وارد برنامه نویسی و سمت بک اند شدم و با زبان php کار میکنم. به زبان‌های php و javascript علاقه زیادی دارم و سعی میکنم در این دو بخش بیشتر یاد بگیرم.

نظرات و سوالات کاربران

ارسال پاسخ بهار بازاری
بهار بازاری
دوشنبه ۰۶ شهریور ۱۴۰۲ ۱۶:۲۶
سلام وقت بخیر
از بابت مطالب مفیدی که در سایت قرار دادید، سپاسگزارم.
ارسال پاسخ مهدی شفا
مهدی شفا
سه شنبه ۲۰ مهر ۱۳۹۵ ۱۱:۰۳
مدت ها بود دنبال همچین ویژگی ای واسه css میگشتم. دمتون گرم.
ارسال پاسخ پیمان
پیمان
شنبه ۲۶ تیر ۱۳۹۵ ۱۷:۵۳
آقاااااااااااااااااا دسد شما درد نکنه خیلییییییییییییییی به کار اومد ;)
ارسال پاسخ زهره  داودپور
زهره داودپور
سه شنبه ۱۸ خرداد ۱۳۹۵ ۰۲:۰۷
سلام اگر ممکنه آموزش مرحله ایی زبان C++ را بگذارید