ویژگی object-position
«ویژگی object-position» می گوید بخش دیده شده تصویر کجا قرار بگیرد. «نسبت تصویر (Aspect Ratio)» یعنی نسبت عرض به ارتفاع. معمولاً با object-fit استفاده می شود تا برش تصویر دقیق تر شود.
مقدمه ویژگی object-position
این ویژگی دو مقدار می گیرد: محور x و محور y. می تواند درصد، پیکسل یا واژه های left، center، right باشد. حتی مقدار منفی هم مجاز است. مثل جابجا کردن عکس در قاب مدرسه.
مثال 1: برج قدیمی را وسط بیاور
با cover قاب را پر کن، سپس با object-position نقطه دلخواه را نشان بده.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 80% 100%;\n}\nمثال 2: برج ایفل را مرکز کن
حالا مرکز تصویر را نزدیک گوشه پایین چپ قرار می دهیم تا ایفل دیده شود.
.image-container {\n width: 200px;\n height: 300px;\n border: 1px solid black;\n}\n\n.image-container img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: 15% 100%;\n}\nنکته: اگر تصویر کش آمد، مشکل از object-fit است، نه از «ویژگی object-position».
مراحل عملی
- یک قاب با عرض و ارتفاع ثابت بساز.
- روی تصویر object-fit: cover بگذار.
- با object-position درصدها را تنظیم کن.
- در موبایل و دسکتاپ نتیجه را چک کن.
جمع بندی سریع
- object-position فقط جای نمایش را عوض می کند.
- همیشه کنار object-fit نتیجه بهتر می دهد.
- درصدها برای واکنش گرایی عالی هستند.
- محور اول x است، محور دوم y است.
مطالب مرتبط: ویژگی object-fit و اشکال تصویر. برای تمرین بیشتر، از لینک های «مشاهده در ادیتور» استفاده کن.