ویژگی object-position در CSS

object-position Property

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

نحوه نمایش

object-position: center center;
object-position: 25px -30px;

مقادیر

 کلیدواژه

برای تعیین موقعیت در حالت دو بعدی از کلیدواژه های top, bottom, righ, left و ترکیب آنها در دو محور افقی و عمودی استفاده می شود.

واحد های اندازه (طول)​

از واحدهایی مانند px , em و rem استفاده می شود.

نکته: موقعیت محتوای عنصر به نحوی می تواند تعیین شود که خارج از محدوده عنصر قرار گیرد.

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

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

html

<div>
   <p>object-position: center center;</p>
   <img class="center" src="http://my-project.ir/img/basketball-ball.jpg" />
</div>
<div>
   <p>object-position: center right;</p>
   <img class="center-right" src="http://my-project.ir/img/basketball-ball.jpg"/>
</div>
<div>
   <p>object-position: 0px 70px;</p>
   <img class="el3" src="http://my-project.ir/img/basketball-ball.jpg" />
</div>
<div>
   <p>object-position: 50px -37px;</p>
   <img class="el4" src="http://my-project.ir/img/basketball-ball.jpg" />
</div>

css

img {
   width: 200px;
   height: 200px;
   border: 2px dotted #6495ed;
   background-color: #bbffbb;
   object-fit: none;
}
.center {
   object-position: center center; 
}
.center-right {
   object-position: center right; 
}
.el3 {
   object-position: 0px 70px; 
}
.el4 {
   object-position: 50px -37px; 
}

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

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