از object-positionویژگی CSS برای تعیین نحوه قرارگیری <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%;
}

منبع