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