CSS – موقعیت‌یابی شیء (object-position)

خاصیت 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%; /* تنظیم موقعیت تصویر */
}

در مثال بعدی، می‌خواهیم برج ایفل در مرکز تصویر قرار گیرد:

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%; /* تنظیم موقعیت تصویر برای قرارگیری برج ایفل */
}

توضیحات

  • object-fit: cover; باعث می‌شود که تصویر بدون تغییر نسبت به ابعاد خود در کادر جا گیرد، اما ممکن است بخش‌هایی از تصویر برش بخورد.
  • object-position موقعیت تصویر را داخل کادر تنظیم می‌کند و از مقادیر درصدی یا مختصاتی مانند top, left یا ترکیب درصدها استفاده می‌کند تا دقیقاً بخشی از تصویر را مشخص کند.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.