خصائص object-position CSS

CSS object-position property لتحديد موقع <img> أو <video> داخل صندوقه.

صورة

لنلق نظرة على الصورة التالية من ووهان، حجمها 600x400 بكسل:

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

مثال

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

جرب بنفسك

استخدام property-position property

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

في هذا المكان، سنستخدم object-position لتحديد موقع الصورة، لجعل المبنى القديم في منتصف المكان:

مثال

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  property-position: 50% 100%;
}

جرب بنفسك

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

مثال

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

جرب بنفسك

خصائص CSS object-*

الجدول أدناه يوضح خصائص CSS object-*: