در این مقاله ما می خواهیم درباره دو ویژگی object-fit,object-position در طراحی سایت صحبت کنیم. اولا ما نحوه استفاده از آنها را به شما نشان می دهیم و جزئیات کامل آن را توضیح می دهیم. ما برای شما یک نسخه آموزشی کوچک آماده کردیم که می توانید کامل این دو ویژگی را درک کنید.
با object-fit در طراحی سایت شما به راحتی می توانید تصاویر(ویدئوها) را برای قالب تکمیل کنید یا فشرده کنید. یک عکس دارای ابعاد مختلفی است و شما می توانید به قسمتهای مختلف قالب آنرا حرکت دهید.
در طراحی سایت div,background-image,background-size با نمایش عکس در content box مشکل وجود دارد ولی در CSS مدرن با استفاده از تگ image شما به راحتی با object-fit می توانید با تصاویر کار کنید:
img {
width: 100%;
object-fit: cover;
}
مقادیر آن موارد زیر می باشد:
عرض و ارتفاع تصویر مطابق با قالب و جعبه باشد.
تصویر نسبت خود را حفظ می کند و کل قالب یا box را پر می کند. قسمتهایی از آن بریده می شود و نمایش داده نمی شود.
اندازه و نسبت ابعاد اصلی تصویر.
بسته به کوچکترین اندازه تصویر در box قرار می گیرد.
این ویژگی محل قرار گیری تصاویر را در طراحی سایت نمایش می دهد. دو مقدار عددی را می گیرد، یکی برای محور عمدی و دیگری برای محور افقی. این اعداد می تواند درصد، پیکسل یا سایر واحد های اندازه گیری باشد و می تواند منفی باشد. برخی از کلمات مانند مرکز، بالا، راست، و غیره نیز می توانند مورد استفاده قرار گیرند.
مثالی از ویژگی را در زیر مشاهده می کنید:
img {
object-position: center;
/* which equals */
object-position: 50% 50%;
}