CSS خاصية موضع الكائن

تُستخدم خاصية CSS object-positionلتحديد كيفية وضع <img> أو <video> داخل الحاوية الخاصة بها.

الصورة

انظر إلى الصورة التالية من باريس ، وهي 400 × 300 بكسل:

بعد ذلك ، نستخدم object-fit: cover;للحفاظ على نسبة العرض إلى الارتفاع وملء البعد المحدد. ومع ذلك ، سيتم قص الصورة لتلائم ، كما يلي:

img {
width: 200px;
height: 300px;
object-fit: cover;
}

لنفترض أن الجزء المعروض من الصورة لم يتم وضعه بالشكل الذي نريده. لتحديد موضع الصورة ، سوف نستخدم object-positionالخاصية.

هنا سوف نستخدم object-positionالخاصية لوضع الصورة بحيث يكون المبنى القديم العظيم في المركز:

img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}

هنا سوف نستخدم object-positionالخاصية لوضع الصورة بحيث يكون برج إيفل الشهير في المنتصف:

img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}

يسرد الجدول التالي كائن CSS - خصائص *:

Property	Description
object-fit	Specifies how an <img> or <video> should be resized to fit its container
object-posititon	Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box"