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

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

دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا

افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی

خرید کلاس آنلاین

افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس

خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت

دانلود آهنگ

کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی

خودتان را اینجا معرفی کنید

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

اما خوشبختانه با خاصیتهای جدید css3 امکانی فراهم شده که بدون همه این دغدغه ها تصاویر رو فیت کنیم.

object-fit

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

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

fill : مقدار پیشفرضه که تصویر رو صرف نظر از نسبت عرض و ارتفاع آن، به اندازه ی کانتنت باکس کاملا فیت میکنه.
contain : سایز تصویر رو با رعایت نسبت تصویر و جلوگیری از دفرمه شدن به اندازه کانتنت باکس افزایش یا کاهش خواهد داد. در این حالت ممکنه تصویر کاملا با کانتنت باکس فیت نشه و نسبت تصویر حفظ بشه.
cover : در این حالت تصویر کاملا کانتنت باکس رو پر میکنه با رعایت نسبت تصویر و حفظ کیفیت آن ، در این حالت تصویر کراپ و بر اساس سایز کانتنت باکس فیت خواهد شد. در این حالت معمولا لازمه از object-position هم استفاده کنیم.
none : در این حالت تصویری که داریم سایز والدش رو نادیده میگیره و در سایز اصلی خودش نمایش داده خواهد شد.
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 علاقه زیادی دارم و سعی میکنم در این دو بخش بیشتر یاد بگیرم.