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

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

برای رفع این مشکل میتونید که سایزی مشخص به تصاویر بدید و بر اون اساس برای کاربر تعریف کنید که طبق همون سایز تصاویر رو روی وب سایت آپلود کنه و یا با استفاده از کدهای جاوااسکریپت یکسری راهکار ارائه دهیم 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 در نمونه زیر می توانید تفاوت هر حالت را به طور کامل درک کنید و تشخیص دهید از کدام حالت در پروژه هاتون استفاده کنید :




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

 

میکائیل اندیشه هستم، چند سالی میشه در حوزه Front-End کار میکنم و بیشتر علاقه ی من در زمینه برنامه نویسی JavaScript , jQuery و تکنولوژی های مرتبط هست و فعلا نیز در این حوزه مطالعه میکنم ... :)

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

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