61- خاصية object-position في CSS

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

الصورة

لنفترض أن لديك صورة لمعلم باريس بعرض 400 بكسل وارتفاع 300 بكسل:

<img src="paris.jpg" alt="Paris">

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

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

استخدام خاصية object-position

لنفترض أن جزء الصورة الذي يتم عرضه حاليًا غير موضح بالطريقة التي تريدها. لاستعراض جزء معين من الصورة، يمكنك استخدام خاصية 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 التي تبدأ بـ object-

يوضح الجدول التالي خصائص CSS التي تبدأ بـ object-: