سلام. وقتتون بخیر

به چند روش می‌تونید انجام بدید:

• استفاده از تصاویر هم‌اندازه: اگه تصاویرتون هم‌اندازه باشن (یعنی ارتفاع و عرض متناسبی داشته باشن)، بدون دردسر کنار هم قرار می‌گیرن و نیازی به دستکاری اضافه نیست. البته ممکنه پیدا کردن یا درست کردن تصاویر دقیقاً هم‌اندازه وقت‌گیر باشه.

• تنظیم ارتفاع با CSS: می‌تونید ارتفاع تصاویر رو با CSS یکسان کنید و بذارید عرضشون به‌طور خودکار تنظیم بشه. برای این کار، از پراپرتی height استفاده کنید و object-fit: cover; رو بهش اضافه کنید. اینجوری تصویر خودش رو بر اساس ارتفاع می‌بره و جا میده، بدون اینکه نسبتش به هم بریزه.

  مثالش:

  img {
      height: 200px; /* ارتفاع ثابت برای همه تصاویر */
      width: auto; /* عرض به صورت خودکار تنظیم می‌شه */
      object-fit: cover; /* تصویر بر اساس ارتفاع ثابت برش می‌خوره */
  }
  

• استفاده از Flexbox یا Grid با نسبت ثابت (aspect-ratio): اگه دوست دارید گالریتون حرفه‌ای‌تر به‌نظر بیاد، Flexbox یا CSS Grid رو امتحان کنید و یه نسبت ثابت (aspect-ratio) برای تصاویر بذارید. این روش کمک می‌کنه که تصاویر به‌صورت مرتب و بدون فضای خالی نمایش داده بشن.

  مثلاً:

  .gallery img {
      width: 100%; /* تصاویر کل عرض کانتینر رو می‌گیرن */
      height: auto; /* ارتفاع خودش تنظیم می‌شه */
      aspect-ratio: 1 / 1; /* نسبت ثابت برای مربع */
      object-fit: cover; /* برش خودکار تصاویر */
  }
  

• استفاده از افزونه‌ها یا پلاگین‌ها: اگه از وردپرس یا سیستم‌های دیگه استفاده می‌کنید، بعضی از پلاگین‌ها هستن که این تنظیمات رو خودشون انجام می‌دن و دیگه نیازی به دستکاری کد ندارید.