CSS — object-fit (object-fit)

آخرین بروزرسانی: 1404/07/20

قبلی: اشکال تصویر (Image Shapes) بعدی: object-position (object-position)

object-fit در CSS (object-fit)

ویژگی «object-fit در CSS» مشخص می کند تصویر یا ویدیو چگونه درون ظرف خود تغییر اندازه دهد. بنابراین می توانید نسبت تصویر (Aspect Ratio) را حفظ کنید یا محتوای رسانه را کاملاً پرکنید.

آشنایی سریع با object-fit

مقادیر اصلی این ویژگی عبارت اند از:

fill (پیش فرض): نسبت تصویر حفظ نمی شود و رسانه برای پرکردن ظرف کشیده/فشرده می شود.
cover: نسبت حفظ می شود، ظرف را پُر می کند و بخش های اضافی برش می خورند.
contain: نسبت حفظ می شود و تصویر بدون برش داخل ظرف جا می گیرد؛ ممکن است فضای خالی بماند.
none: بدون تغییر اندازه.
scale-down: کوچک ترِ حالت none یا contain اعمال می شود.

نکته: برای نمونه های زیر فرض کنید ظرفی با اندازه ثابت دارید و تصویر را 100٪ عرض و ارتفاع ظرف می گذارید.

object-fit: fill

در این حالت نسبت تصویر حفظ نمی شود و رسانه دقیقاً ظرف را پُر می کند.

.image-container { width: 200px; height: 300px; border: 1px solid #000; } .image-container img { width: 100%; height: 100%; object-fit: fill; }

object-fit: cover

نسبت تصویر حفظ می شود، ظرف کامل پُر می شود و قسمت های بیرون از ظرف برش می خورند.

.image-container { width: 200px; height: 300px; border: 1px solid #000; } .image-container img { width: 100%; height: 100%; object-fit: cover; }

object-fit: contain

نسبت حفظ می شود و تصویر کاملاً دیده می شود؛ اما ممکن است نوارهای خالی باقی بماند.

.image-container { width: 200px; height: 300px; border: 1px solid #000; } .image-container img { width: 100%; height: 100%; object-fit: contain; }

object-fit: none

هیچ تغییر اندازه ای اعمال نمی شود و ممکن است تصویر از مرز ظرف بیرون بزند.

.image-container { width: 200px; height: 300px; border: 1px solid #000; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: none; }

object-fit: scale-down

تصویر کوچک تر از بین دو حالت none یا contain انتخاب می شود.

.image-container { width: 200px; height: 300px; border: 1px solid #000; } .image-container img { width: 100%; height: 100%; object-fit: scale-down; }

هشدار: مقداردهی width و height برای ظرف و رسانه مهم است؛ در غیر این صورت اثر object-fit واضح نخواهد بود.

ترکیب با object-position

پس از انتخاب حالت مناسب، با object-position می توانید ناحیه برش خورده را جابه جا کنید (مثلاً تمرکز روی سوژه تصویر). همچنین برای چینش کلی تصاویر، صفحه مرکزچین کردن تصویر را ببینید.

برای مطالعه تکمیلی، به اشکال تصویر و نیز object-fit در CSS مراجعه کنید.