چگونه تصاویر سایت را فیت (Fit) کنیم؟
در زمان طراحی سایت شخصی یا برای مشتری نیاز داریم تا نحوه نمایش تصاویر سایت رو به گونه ای طراحی کنیم تا با هر نوع اندازه تصویر به خوبی هماهنگ باشد.ویژگی object-fit در Css3 به توسعه دهنده فرانت اند این اجاره رو میده تا بتونیم تصاویر سایت رو براساس عرض و ارتفاع باکس نگه دارنده یا کانتنت باکس فیت یا سازگار کنیم.
Object-fit میتونه با یکی از 5 مقدار زیر مقداردهی بشه :
- fill : مقدار پیشفرضه آبجکت فیت که تصویر رو صرف نظر از نسبت عرض و ارتفاع آن، به اندازه ی کانتنت باکس کاملا فیت میکنه.
- contain : سایز تصویر رو با رعایت نسبت تصویر و جلوگیری از دفرمه شدن به اندازه کانتنت باکس افزایش یا کاهش خواهد داد. در این حالت ممکنه تصویر کاملا با کانتنت باکس فیت نشه و نسبت تصویر حفظ بشه.
- cover : در این حالت تصویر کاملا کانتنت باکس رو پر میکنه با رعایت نسبت تصویر و حفظ کیفیت آن ، در این حالت تصویر کراپ و بر اساس سایز کانتنت باکس فیت خواهد شد. در این حالت معمولا لازمه از object-position هم استفاده کنیم.
- none : در این حالت تصویری که داریم سایز والدش رو نادیده میگیره و در سایز اصلی خودش نمایش داده خواهد شد.
- scale-down : در این حالت تصویر مقایسه ای بین حالتهای none و contain رو انجام میده و به صورت سفارشی سایز کوچکتر رو انتخاب خواهد کرد.
ویژگی دیگری که میتوان کنار ویژگی آبجکت فیت استفاده کرد Object-position است.این ویژگی محل فیت و قرار گیری دقیق تصویر بر روی کانتنت باکس رو با مقادیر درصدی و px مشخص میکند.
img { height: 120px; } .cover { width: 260px; object-fit: cover; }
در ویدئو زیر با نحوه استفاده از این ویژگی کاربردی در css3 به صورت کامل آشنا می شویم.در ویدئو آموزشی زیر قدم به قدم با ویژگی آبجکت فیت در قالب یک پروژه ساده کار خواهیم کرد.دقت داشته باشید که در طول این آموزش با ویژگی ارثبری در سی اس اس زیاد کار کردیم.اگر با این مبحث آشنایی ندارید توصیه میکنم از دوره آموزش Css مقدماتی و پیشرفته سایت استفاده کنید.
[videojs mp4=”http://dl.codefriend.ir/Css%20Pishrafteh/object-fit.mp4″ width=”1280″ height=”720″]
کدهای HTML استفاده شده در طول آموزش ویدئویی:
<div class="container -column"> <div class="holder"> <div>object-fit: fill</div> <div class="element"> <img src="http://codefriend.ir/files/2017/05/javascript-i-ytimg-1-768x432.jpg" class="-fill"> </div> </div> <div class="holder"> <div>object-fit: contain</div> <div class="element"> <img src="http://codefriend.ir/files/2017/05/javascript-i-ytimg-1-768x432.jpg" class="-contain"> </div> </div> <div class="holder"> <div>object-fit: cover</div> <div class="element"> <img src="https://unsplash.it/600/900?random" class="-cover"> </div> </div> </div>
کدهای Css استفاده شده در طول آموزش ویدئویی:
/*Codefriend.ir*/ .-fill { width: inherit; height: inherit; object-fit: fill; } .-cover { width: inherit; height: inherit; object-fit: cover; } .-contain { width: inherit; height: inherit; object-fit: contain; } .element { width: 300px; height: 200px; background-color: #333; } .holder { font-size: 20px; line-height: 1.5em; margin-bottom: 1em; } html, body { height: auto; }
در آموزش بعدی با ویژگی آبجکت فیت برای ویدئوهای استفاده شده در سایت آشنا خواهیم شد.موفق باشد.
برچسب:inharit در css, inharit در سی اس اس, Object-fit چیست, object-fit در سی اس اس, Object-position, آموزش ویدئویی آنلاین, اموزش انلاین css3, اموزش طراحی سایت, اموزش فرانت اند, اموزش ویدئویی css, اموزش ویدئویی css3, اموزش ویدئویی جاوا اسکریپت, توسعه دهنده فرانت اند, چطور اندازه تصاویر رو اتوماتیک فیت کنم, چگونه تصاویر سایت درس کینم, چگونه تصاویر سایت را فیت کنیم, چگونه توسعه دهنده فرانت اند شویم, در سی اس اس Object-fit, دوره آموزش Css مقدماتی و پیشرفته, ساخت قالب سایت, طراحی سایت, فیت تصاویر سایت با استفاده از object-fit, قالب, کانتنت باکس, ویدئو آموزشی, ویدئو آموزشی سایت کدفرند, ویژگی object-fit, وِیژگی Object-position, ویژگی آبجکت فیت, ویژگی ارثبری, ویژگی ارثبری در Css