CSS object-position امتیازی
- بالای پیج اوبجکت-فیت
- پائین پیج اوتفیت
تعریف و استفاده
ویژگی object-position با object-fit استفاده میشود تا تعیین شود که چگونه باید از مقادیر x/y برای قرارگیری <img> یا <video> در جعبه محتوای خود استفاده شود.
لطفاً مراجعه کنید:
آموزش CSS:CSS object-fit
دستورالعمل CSS:CSS object-position
دستورالعمل HTML DOM:ویژگی objectPosition
مثال
اندازه تصویر را تنظیم کنید تا با جعبه محتوایش مناسب باشد و تصویر را 5px از سمت چپ و 10% از بالا حرکت دهید:
img.a {
width: 200px;
height: 400px;
اوبجکت-فیت: none;
اوبجکت-پوزیشن: 5px 10%;
border: 5px solid red;
}
نوشتار CSS
اوبجکت-پوزیشن: پوزیشن|مقدار اولیه|وراثت;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| پوزیشن |
موقعیت تصویر یا ویدیو را در جعبه محتوایش تعیین میکند. مقدار اولین کنترل محور x را انجام میدهد، مقدار دوم کنترل محور y را انجام میدهد. میتواند رشته (چپ، مرکز یا راست) یا عدد (با واحد px یا ％) باشد. مقادیر منفی مجاز هستند. |
| مقدار اولیه | این ویژگی را به مقدار پیشفرض خود تنظیم کنید. لطفاً مراجعه کنید: مقدار اولیه. |
| وراثت | این ویژگی را از عنصر والد خود ارث میبرد. لطفاً مراجعه کنید: وراثت. |
جزئیات فنی
| مقدار پیشفرض: | 50% 50% |
|---|---|
| وراثت: | بله |
| انیمیشن ساخت: | پشتیبانی میشود. لطفاً مراجعه کنید:ویژگیهای مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| نوشتار جاوااسکریپت: | اوبجکت.استایل.اوبجکت-پوزیشن="0 10%" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه اولین مرورگر پشتیبان از این ویژگی هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
- بالای پیج اوبجکت-فیت
- پائین پیج اوتفیت
