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