خصوصیت CSS object-position

CSS object-position صفت استعمال کیا جاتا ہے تاکہ <img> یا <video> کو اس کے کانٹینر میں کا مقام مخصوص کیا جائے۔

تصویر

وہ تصویر دیکھیں جو وہان سے آئی ہے، سائز 600x400 پیکسل ہے:

آگے، ہم استعمال کریں گے object-fit: cover; کو سائز کو پورا کرنا اور وسط میں رکھنا، لیکن تصویر کو اس طرح میں کپتا جائے گا:

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

اگر نمائش کی تصویر کا حصہ ہماری خواہش کا نہیں ہوا تو، تصویر کو وسط میں رکھنے کیلئے، ہم استعمال کریں گے object-position صفت。

یہاں، ہم استعمال کریں گے object-position صفت استعمال کرکے تصویر کو وسط میں رکھنا، قدیم عمارت کو وسط میں رکھنا:

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

یہاں، ہم استعمال کریں گے object-position ویژگی برای قرار دادن تصویر، تا برج معروف در سمت راست قرار گیرد:

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

در جدول زیر خصوصیات CSS object-* لیست شده‌اند:

خصوصیت	توضیح
object-fit	تعیین اینکه <img> یا <video> چگونه باید به اندازه کافی بزرگ شوند تا با قاب خود سازگار شوند.
object-position	تعیین اینکه <img> یا <video> چگونه باید در قاب محتوای خود از طریق مختصات x/y قرار گیرند.