خاصیت 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یا ترکیب درصدها استفاده می‌کند تا دقیقاً بخشی از تصویر را مشخص کند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام