1️⃣ object-fit

• کنترل نحوه نمایش تصویر داخل یک باکس با اندازه مشخص.
• مقادیر مهم:
  • fill → پر کردن باکس بدون حفظ نسبت تصویر (ممکن است کشیده شود).
  • contain → تصویر داخل باکس قرار می‌گیرد و نسبت تصویر حفظ می‌شود.
  • cover → تصویر کل باکس را می‌پوشاند و نسبت تصویر حفظ می‌شود (ممکن است بخشی برش بخورد).
  • scale-down → تصویر کوچک می‌شود تا داخل باکس قرار بگیرد (با حفظ نسبت تصویر).
  • none → تصویر بدون تغییر اندازه نمایش داده می‌شود.

2️⃣ وسط‌گذاری عمودی و افقی عناصر

1️⃣ وسط‌گذاری یک عنصر در مرکز والد با position + transform

.container section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• top: 50% و left: 50% → شروع از وسط
• transform: translate(-50%, -50%) → اصلاح برای مرکز دقیق

2️⃣ وسط‌گذاری در عرض والد با margin: auto

form {
  margin: 50px auto;
  width: 300px;
}

• عنصر در عرض صفحه یا والد به صورت افقی وسط‌چین می‌شود.

3️⃣ وسط‌گذاری متن داخل والد با text-align: center

form {
  text-align: center;
}
.login .btn-wrapper {
  text-align: center;
}