نحوه استفاده از خاصیت CSS object-fit

خاصیت object-fit یکی از ویژگی‌های CSS است که برای کنترل چگونگی نمایش محتوا داخل یک عنصر استفاده می‌شود، به خصوص در مورد تصاویر و ویدیوها. این ویژگی به شما امکان می‌دهد تا تعیین کنید که محتوا چگونه در کادرهایی که اندازه آن‌ها با محتوای داخلشان برابر نیست، قرار بگیرد.

در طراحی وب، گاهی با وضعیتی مواجه می‌شوید که نیاز دارید تصاویر به صورت متناسب یا برش خورده در یک باکس نمایش داده شوند. در این مواقع، object-fit کمک‌کننده خواهد بود. برای مثال، اگر نیاز دارید یک تصویر را به صورت کامل داخل یک باکس جا دهید بدون اینکه اعوجاجی در آن ایجاد شود، می‌توانید از این ویژگی بهره بگیرید.

ویژگی object-fit شامل مقادیری مانند fill، contain، cover، none، و scale-down می‌شود. هر کدام از این مقادیر رفتار خاصی را برای نمایش محتوا تعریف می‌کنند. برای مثال، cover باعث می‌شود تصویر به گونه‌ای برش بخورد که کل باکس را پر کند، در حالی که contain تصویر را تا حد امکان بدون برش در باکس جا می‌دهد.

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

<style>
  .image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: 1px solid #ccc;
  }
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
</div>

توضیح کد:

<style> - شروع بخش استایل CSS.

.image-container - کلاس برای باکس نگهدارنده تصویر، که با عرض ۳۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل تعریف شده است.

overflow: hidden; - برای جلوگیری از نمایش بخش‌های اضافی تصویر که خارج از محدوده باکس قرار می‌گیرند.

border: 1px solid #ccc; - اضافه کردن حاشیه به دور باکس برای مشخص بودن آن.

.image-container img - انتخاب تصویر داخل باکس برای اعمال استایل‌ها.

width: 100%; و height: 100%; - تعیین اندازه تصویر به صورت کامل نسبت به باکس.

object-fit: cover; - تنظیم داریم که تصویر به صورت برش‌خورده داخل باکس جا بگیرد و باکس را پر کند.

</style> - پایان بخش استایل CSS.

<div class="image-container"> - ایجاد یک دیو با کلاس برای نگهداری تصویر.

<img src="example.jpg" alt="Example Image"> - قرار دادن تصویر داخل دیو با مسیر تصویر و توضیح متن جایگزین.

</div> - پایان دیو نگهدارنده تصویر.