🎁 تخفیف دوره های آموزشی 🎁

Object-Fit در CSS

در این بخش ویژگی object-fit در CSS به همراه مثال های کاربردی آموزش داده می شود.

Object-Fit در CSS

ویژگی object-fit در CSS

ویژگی object-fit در CSS برای تعیین اینکه چگونه یک <img> یا <video> باید تغییر اندازه داده شود تا با container آن مطابقت داشته باشد استفاده می شود.

این ویژگی به محتوا می گوید که ظرف را به روش های مختلف پر کند. مثلاً با "حفظ نسبت ابعاد" یا "کشش و اشغال تا اندازه ای که فضا هست و ممکن است".

به تصویر زیر از پاریس نگاه کنید. این تصویر 400 پیکسل عرض و 300 پیکسل ارتفاع دارد:

ویژگی object-fit در CSS

با این حال، اگر شکل تصویر بالا را به نصف عرض آن (200 پیکسل) و با همان ارتفاع (300 پیکسل) تبدیل کنیم، به شکل زیر خواهد بود که کد و خروجی آن نشان داده شده است:

ویژگی object-fit در CSS

خروجی مثال بالا عبارت است از :

آموزش CSS

می بینیم که تصویر در حال فشرده شدن است تا بتواند در ظرف 200x300 پیکسل قرار گیرد (نسبت تصویر (aspect ratio) اصلی آن از بین رفته است).

در اینجا ویژگی object-fit وارد عمل می شود. ویژگی object-fit می تواند یکی از مقادیر زیر را بگیرد:

1 - fill : این مقدار پیش فرض است. در این حالت اندازه تصویر برای پر کردن ابعاد داده شده تغییر می کند. در صورت لزوم، تصویر کشیده یا فشرده می شود تا جا بیفتد.

2 - contain : در این حالت تصویر نسبت ابعاد خود یا همان aspect ratio را حفظ می کند، اما اندازه آن تغییر می کند تا در ابعاد مشخص شده قرار گیرد.

3 - cover : در این حالت تصویر نسبت ابعاد خود را حفظ می کند و بعد داده شده را پر می کند. در نهایت تصویر به تناسب بریده خواهد شد.

4 - none : در این حالت اندازه تصویر تغییر نمی کند.

5 - scale-down : در این حالت تصویر به کوچکترین نسخه یعنی حالت none یا content کوچک می شود.

استفاده از object-fit با مقدار content

اگر از object-fit: cover استفاده کنیم، تصویر نسبت ابعاد خود را حفظ می کند و بعد داده شده را پر می کند. تصویر به تناسب بریده می شود:

مثال زیر را ببینید.

استفاده از object-fit با مقدار content

خروجی مثال بالا عبارت است از :

استفاده از object-fit با مقدار content

استفاده از object-fit با مقدار contain

اگر از object-fit: contain استفاده کنیم، تصویر نسبت ابعاد خود را حفظ می کند، اما اندازه خود را برای قرار گرفتن در ابعاد داده شده تغییر می دهد:

مثال زیر را ببینید.

استفاده از object-fit با مقدار contain

خروجی مثال بالا عبارت است از :

استفاده از object-fit با مقدار contain

استفاده از object-fit با مقدار fill

اگر از object-fit: fill استفاده کنیم اندازه تصویر برای پر کردن بعد داده شده تغییر می کند. در صورت لزوم، تصویر کشیده یا فشرده می شود تا fit شود:

مثال زیر را ببینید.

استفاده از object-fit با مقدار fill

خروجی مثال بالا عبارت است از :

استفاده از object-fit با مقدار fill

استفاده از object-fit با مقدار none

اگر از object-fit: none استفاده کنیم، اندازه تصویر تغییر نمی کند.

مثال زیر را ببینید.

استفاده از object-fit با مقدار none

خروجی مثال بالا عبارت است از :

استفاده از object-fit با مقدار none

استفاده از object-fit با مقدار scale-down

اگر از object-fit: scale-down استفاده کنیم اندازه تصویر به کوچکترین نسخه none یا contain کاهش می یابد:

مثال زیر را ببینید.

استفاده از object-fit با مقدار scale-down

خروجی مثال بالا عبارت است از :

استفاده از object-fit با مقدار scale-down

مثالی دیگر!

در اینجا دو تصویر داریم و می خواهیم عرض 50 درصد پنجره مرورگر و 100 درصد ارتفاع را پر کند.

در مثال زیر ما از object-fit استفاده نمی کنیم، بنابراین وقتی اندازه پنجره مرورگر را تغییر می دهیم، نسبت ابعاد تصاویر خراب می شود.

ویژگی object-fit در CSS

خروجی مثال بالا عبارت است از :

ویژگی object-fit در CSS

در مثال بعدی، ما از object-fit: cover استفاده می کنیم، بنابراین وقتی اندازه پنجره مرورگر را تغییر می دهیم، نسبت ابعاد تصاویر حفظ می شود:

ویژگی object-fit در CSS

خروجی مثال بالا عبارت است از :

ویژگی object-fit در CSS

مثال های بیشتری از CSS object-fit

مثال زیر تمام مقادیر ممکن ویژگی object-fit را در یک مثال نشان می دهد:

مثال های بیشتری از CSS object-fit

خروجی مثال بالا عبارت است از :

مثال های بیشتری از CSS object-fit

ویژگی های CSS Object

در ادامه ویژگی های CSS object نشان داده شده است.

object-fit : این property نحوه تغییر اندازه <img> یا <video> را مشخص می کند تا متناسب با ظرف آن باشد.

object-position : این property نحوه قرارگیری <img> یا <video> را با مختصات x/y در "جعبه محتوای خود" (content box) مشخص می کند.

object-fit در CSS object-fit property object-position property آموزش CSS آموزش طراحی سایت