object-fit

ویژگی object-fit تعیین می کند که محتوای عنصری از نوع Replaced چگونه در ابعاد مشخص شده اش رسم شود.

Replaced Element

به عناصری گفته می شود که محتوا و ابعاد آنها از منبعی خارج از محدوده سی اس اس تعیین می شوند. به عنوان مثال عنصر <video>، <img> و یا عناصری مثل <textarea> و <input>ها.

کاربرد object-fit

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

 

 

در این مورد می توان از طریق این ویژگی تصاویر مختلف با ابعاد مختلف را طوری تنظیم کرد تا در ابعاد تعیین شده برای قسمت تصویر پروفایل به صورت قابل قبول نمایش داده شوند.

به عنوان مثال در مثال زیر اندازه عنصر تصویر را برابر با 100 در 100 پیکسل قرار داده ایم و از یکی از مقادیر این ویژگی استفاده می کنیم تا تصاویری که با ابعاد و تناسب متفاوت در آن قرار می گیرند هم بصورت مناسبی نمایش داده شوند:

img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

توجه داشته باشید که همان طور که می توان اندازه محتوای این نوع عناصر را توسط ویژگی object-fit تعیین کرد می توان مکان محتوای آنها را نیز توسط ویژگی object-position نیز مشخص کرد.

مقادیر ویژگی object-fit

تمام مقادیری که این ویژگی می تواند داشته باشد به شرح زیر هستند:

object-fit: fill | contain | cover | none | scale-down

fill

این مقدار، مقدار اولیه این ویژگی می باشد و باعث می شود تا اندازه محتوای عنصر طوری تغییر کند تا کل فضای مشخص شده برای عنصر را پر کند و همه محتوا قابل مشاهده باشد.

چون هدف این مقدار فقط این است که سراسر عنصر پوشیده از محتوا شود اگر تناسب ابعاد مشخص شده برای عنصر با تناسب ابعاد محتوا یکی نباشد محتوا کج و معوج شده و تناسب خود را از دست می دهد.

contain

contain باعث می شود تا محتوا به اندازه ای در بیاید که هم عرض و هم ارتفاع محتوا درون ناحیه ترسیم آن قرار بگیرند. توجه داشته باشید که این کار با حفظ تناسب عرض و ارتفاع محتوا صورت می گیرد.

تصویر متحرک زیر درک بهتری از این مقدار را به ما می دهد. در اولین حرکت فرض کنید تصویری بزرگتر از محیط ترسیم دارید این مقدار باعث کوچک شدن تصویر می شود تا جایی که کل تصویر قابل مشاهده باشد. در حالت دوم تصویر کوچکتر از محیط در نظر گرفته شده این بار مقدار contain باعث می شود تا تصویر تاجایی بزرگ شود تا اندازه عرض و یا ارتفاع تصویر متناسب با اندازه نگهدارنده شود:

 

 

اگر بخواهیم در یک جمله contain را تعریف کنیم خواهیم گفت این مقدار باعث می شود تا حداقل یک سمت محتوا برابر با نگهدارنده شود بطوری که کل محتوا قابل مشاهده باشد.

cover

cover باعث می شود تا مقدار کوچکتر بین عرض و ارتفاع, تمام سطح محیط ترسیم محتوا را بپوشاند و واضح است که مثلا اگر عرض کوچکتر از ارتفاع است و سطح را بعد از تغییر می پوشاند قطعا ارتفاع هم از آنجایی که بزرگتر است باعث پوشش عمودی سطح می شود.

تصویر متحرک زیر حالتی که تصویر اصلی از نگهدارنده کوچکتر است و حالتی که بزرگتر است را برای درک بهتر موضوع شبیه سازی می کند:

 

 

 

none

این مقدار باعث می شود تا محتوا به هیچ عنوان تغییر اندازه ندهد و با همان اندازه ای که به ذات دارد درون ناحیه محتوای عنصر ترسیم شود.

مثلا فرض کنید ویدویی داریم با ابعاد 800 در 600 پیکسل و عنصر video بصورت زیر تنظیم شده است:

video {
  width: 100px;
  height: 100px;
  object-fit: none;
}

با توجه به مقادیر مشخص شده و ابعاد محتوا فقط گوشه ای از ویدیو در این ناحیه رسم می شود و کاربر نمی تواند تمام سطح ویدیو را مشاهده کند.

scale-down

این مقدار باعث می شود تا مرورگر مقادیر none و contain را برای محتوا و ابعاد مشخص شده برای عنصر آن مقایسه کند و هر کدام که باعث می شود تا اندازه نهایی محتوا کوچک تر باشد را انتخاب می کند.

به بیان دیگر اگر هیچ کدام از ابعاد محتوای ما بزرگتر از عرض و ارتفاع عنصر نباشند مقدار none برای محتوا اعمال می شود در غیر این صورت contain برنده مقایسه خواهد بود.

توجه کنیم که با توجه به نامی که برای این مقدار انتخاب شده است هدف این است که محتوا در کوچک ترین سایز ممکن نمایش داده شود.

مقایسه مقادیر ویژگی object-fit

در زیر تصویری با ابعاد ذاتی مشخص نمایش داده شده است و همینطور در موارد مختلف ابعاد تگ img برابر و با حاشیه قرمز مشخص شده است:

اگر مقداری باعث شود تا محتوا سراسر عنصر را نپوشاند، قسمت های خالی پس زمینه عنصر را نمایش می دهند پس می توان مثلا پس زمینه عنصر img و یا video را با رنگی دلخواه تنظیم کرد.

دمو

دموی زیر در سایت موزیلا قرار گرفته است. می توانید با تغییر مقادیر به درک بهتر موضوع کمک کنید. (پس زمینه عنصر img قرمز می باشد)

 

See the Pen object-fit by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگر ها

پشتیبانی مرورگرها در سایت caniuse.com بصورت زیر می باشد: