تصاویر وب سایت را فیت کنید!
اما مشکل از اینجا شروع میشه که شما پروژه رو تحویل مشتری میدید و خودش باید تصاویر مطالب وب سایت رو آپلود کنه و اکثرا در ۹۰ درصد اوقات مشتری نمیتونه و دانش این موضوع رو نداره که سایز تصاویر رو ست کنه و تصاویری با رزولوشن بالا و سایز مناسب قرار بده و شما به عنوان یک فرانت اندکار حرفه ای باید پیش بینی این حالت رو داشته باشید و اجازه ندهید سایز تصاویر از حدی معمول بزرگتر بشه و باعث به هم ریختن دیزاین وب سایت بشه.
سایت ترجمه رایت می
سفارش آنلاین ترجمه مقالات و متون تخصصی با خیال راحت
سفارش آنلاین ترجمه مقالات و متون تخصصی با خیال راحت
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
خدمات کاشت مو در تهران
انجام بهترین خدمات کاشت مو به روش های جدید و تضمینی در کلینیک طب فروغ سحر
انجام بهترین خدمات کاشت مو به روش های جدید و تضمینی در کلینیک طب فروغ سحر
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بلیط تهران کیش
خرید بلیط هواپیما تهران کیش آس چارتر
خرید بلیط هواپیما تهران کیش آس چارتر
بلیط مشهد تهران
خرید بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
خرید پلکسی
خرید انواع ورق های پلکسی مستقیم از وارد کننده
خرید انواع ورق های پلکسی مستقیم از وارد کننده
بلیط هواپیما خارجی
خرید بلیط هواپیما خارجی
خرید بلیط هواپیما خارجی
پاوربانک تبلیغاتی
ایده جدید برای هدیه تبلیغاتی سازمان شما
ایده جدید برای هدیه تبلیغاتی سازمان شما
بلیط تهران بندرعباس
خرید بلیط هواپیما تهران بندرعباس آس چارتر
خرید بلیط هواپیما تهران بندرعباس آس چارتر
نمیدونستم
جدیدترین اخبار تکنولوژی را در سایت علمی و دانستنی های نمیدونستم دنبال کنید
خودتان را اینجا معرفی کنید
جدیدترین اخبار تکنولوژی را در سایت علمی و دانستنی های نمیدونستم دنبال کنید
برای رفع این مشکل میتونید که سایزی مشخص به تصاویر بدید و بر اون اساس برای کاربر تعریف کنید که طبق همون سایز تصاویر رو روی وب سایت آپلود کنه و یا با استفاده از کدهای جاوااسکریپت یکسری راهکار ارائه دهیم
اما خوشبختانه با خاصیتهای جدید css3 امکانی فراهم شده که بدون همه این دغدغه ها تصاویر رو فیت کنیم.
object-fit
این ویژگی تعریف میکنه المانی که داریم چگونه نمایش داده بشه، برای مثال تصویری که در صفحه داریم به چه نحوی به عرض و ارتفاع کانتنت باکس جواب بده و به نحو احسن نمایش داده بشه؟!این ویژگی برای تصاویر، ویدئو و ترکیبی با ویژگی object-positionاستفاده می شود که در ادامه مقاله در این مورد صحبت خواهیم کرد.
Object-fit میتونه با یکی از 5 مقدار زیر مقداردهی بشه :
- fill : مقدار پیشفرضه که تصویر رو صرف نظر از نسبت عرض و ارتفاع آن، به اندازه ی کانتنت باکس کاملا فیت میکنه.
- contain : سایز تصویر رو با رعایت نسبت تصویر و جلوگیری از دفرمه شدن به اندازه کانتنت باکس افزایش یا کاهش خواهد داد. در این حالت ممکنه تصویر کاملا با کانتنت باکس فیت نشه و نسبت تصویر حفظ بشه.
- cover : در این حالت تصویر کاملا کانتنت باکس رو پر میکنه با رعایت نسبت تصویر و حفظ کیفیت آن ، در این حالت تصویر کراپ و بر اساس سایز کانتنت باکس فیت خواهد شد. در این حالت معمولا لازمه از object-position هم استفاده کنیم.
- none : در این حالت تصویری که داریم سایز والدش رو نادیده میگیره و در سایز اصلی خودش نمایش داده خواهد شد.
- scale-down : در این حالت تصویر مقایسه ای بین حالتهای none و contain رو انجام میده و به صورت سفارشی سایز کوچکتر رو انتخاب خواهد کرد.
img {
height: 120px;
}
.cover {
width: 260px;
object-fit: cover;
}
که به صورت زیر نتیجه را می بینیم :
نمونه کدهای زیر را با دقت بررسی کنید تا با مفهوم کامل این موضوع آشنا شوید :
حالا که با مفهوم و حالتهای مختلف Object-fit آشنا شدید حیلی وقتها استفاده به تنهایی آن کمی استایل و کار ما رو به هم میریزه و لازمه بخشی از تصویر که میخواهیم نمایش داده بشه را با Object-position مشخص کنیم.
با بررسی دقیق حالتهای Object-position در نمونه زیر می توانید تفاوت هر حالت را به طور کامل درک کنید و تشخیص دهید از کدام حالت در پروژه هاتون استفاده کنید :
امیدوارم مفید واقع شده باشه .
شاد باشید :)
میکائیل اندیشه
من میکائیل اندیشه هستم که از سال ۲۰۱۱ وارد حوزه برنامه نویسی و طراحی وب شدم، ابتدا با زبان c++ در رشته تحصیلیم ( مهندسی فناوری اطلاعات ) آشنا شدم و پس از آن وارد طراحی وب سمت کلاینت ( Front-End ) شدم و پس از چند سال کار و تجربه در این حوزه از اواسط ۲۰۱۷ وارد برنامه نویسی و سمت بک اند شدم و با زبان php کار میکنم. به زبان‌های php و javascript علاقه زیادی دارم و سعی میکنم در این دو بخش بیشتر یاد بگیرم.
نظرات و سوالات کاربران
از بابت مطالب مفیدی که در سایت قرار دادید، سپاسگزارم.