آموزش ویژگی object-position در CSS

از ویژگی object-position برای مشخص کردن اینکه عناصر <img> یا <video> چگونه باید در داخل ظرف(container) خود موقعیت دهی شوند، استفاده می شود. 

تصویر مورد نظر

به تصویر زیر در پاریس که اندازه ی آن 400x300 پیکسل است نگاه کنید:

در تصویر زیر، از object-fit: cover; استفاده کرده ایم تا نسبت ابعاد(aspect ratio) حفظ شود و اندازه ی داده شده پر شود. اما این تصویر برش می خورد، تا جا شود، به صورت زیر:

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 100%;
}

در اینجا، از ویژگی object-position برای موقعیت دهی به تصویر استفاده می شود به طوری که برج ایفل در وسط قرار گیرد:

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 15% 100%;
}

منبع: https://www.w3schools.com/css