ویژگی object-fit در CSS

object-fit Property

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

نحوه نوشتار

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

مقادیر

contain​

عنصر مورد نظر با نسبت تصویر پیشفرض خود قرار میگیرد.

fill​

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

cover​

در این حالت عنصر مورد نظر  نسبت تصویر خود را حفظ می کند و اگر اندازه آن با اندازه داده شده متناسب نباشد برش می خورد.

none​

در این حالت عنصر مورد نظر تغییر سایز نمی دهد.

scale-down​

در این حالت محتوا مانند حالت های  contain و none اندازه دهی می شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

 <div>
      <p>object-fit: fill</p>
      <img class="fill" src="http://my-project.ir/img/ocean.jpg" />
</div>
<div>
      <p>object-fit: cover</p>
      <img class="cover" src="http://my-project.ir/img/ocean.jpg" />
</div>
<div>
      <p>object-fit: contain</p>
      <img class="contain" src="http://my-project.ir/img/ocean.jpg" />
</div>
<div>
      <p>object-fit: none</p>
      <img class="none" src="http://my-project.ir/img/ocean.jpg" />
</div>
<div>
      <p>object-fit: scale-down</p>
      <img class="scale-down" src="http://my-project.ir/img/ocean.jpg" />
</div>

css

div {
   float: left;
   margin-right: 20px;
}
img {
   width: 200px;
   height: 100px;
   border: 2px solid orangered;
}
.fill {
   object-fit: fill; 
}
.cover {
   object-fit: cover; 
}
.contain {
   object-fit: contain; 
}
.none {
   object-fit: none; 
}
.scale-down {
   object-fit: scale-down; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.