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 پشتیبانی می کنند.