نوعیت object-position CSS

CSS object-position ویژگی برای تعیین موقعیت <img> یا <video> در داخل قالب خود استفاده می‌شود.

تصویر

نگاه کنید به این تصویر از ووهان، اندازه 600x400 پیکسل:

در مرحله بعد، ما از object-fit: cover; برای حفظ نسبت ارتفاع به عرض و پر کردن اندازه داده شده استفاده می‌شود. اما، تصویر برای تطابق با آن کاهش داده خواهد شد، مانند این:

مثال

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

آزمایش کنید

ویژگی object-position استفاده خواهیم کرد

فرض کنید بخشی از تصویری که نمایش داده می‌شود، در موقعیتی نیست که ما می‌خواهیم. برای تعیین موقعیت تصویر، ما از 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-*

در جدول زیر ویژگی‌های CSS object-* آورده شده است:;