خاصية موضع الكائن في CSS
مثال
قم بتغيير حجم الصورة لتلائم مربع المحتوى الخاص بها ، ثم ضع الصورة 5 بكسل من اليسار و 10٪ من الأعلى داخل مربع المحتوى:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
التعريف والاستخدام
يتم object-position
استخدام الخاصية مع object-fit لتحديد كيفية وضع <img> أو <video> مع إحداثيات x / y داخل "مربع المحتوى الخاص به".
القيمة الافتراضية: | 50٪ 50٪ |
---|---|
وارث: | نعم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.objectPosition = "0 10٪" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
بنية CSS
object-position: position|initial|inherit;
قيم الملكية
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS object-fit
مرجع CSS: كائن CSS مناسب
مرجع DOM HTML: خاصية objectPosition