هم تراز کردن تصاویر

سلام خوبی از این روش ها استفاده کن

1. استفاده از Flexbox: با استفاده از خصوصیات Flexbox، می توانید تصاویر را به صورت خودکار به یک ارتفاع یکسان تراز کنید. برای این منظور، کانتینر حاوی تصاویر را به عنوان flex container تعریف کنید و از خصیصه align-items: stretch در استایل آن استفاده کنید. این خصیصه باعث می شود تمام اجزای داخل کانتینر با ارتفاعی یکسان نمایش داده شوند.

.container {
  display: flex;
  align-items: stretch;
}

2. استفاده از Grid: اگر از سیستم Grid CSS استفاده می کنید، می توانید تصاویر را در شبکه قرار داده و اطمینان حاصل کنید که ارتفاع آنها یکسان است. با استفاده از خصیصه grid-auto-rows: 1fr در استایل کانتینر، ارتفاع تصاویر را به صورت ضمنی مشخص کنید.

.container {
  display: grid;
  grid-auto-rows: 1fr;
}

3. استفاده از جاوااسکریپت: می توانید از جاوا اسکریپت برای تراز کردن ارتفاع تصاویر استفاده کنید. با استفاده از جاوا اسکریپت، ارتفاع تمام تصاویر را محاسبه کنید و بزرگترین ارتفاع را به عنوان ارتفاع مشترک تنظیم کنید.

const images = document.querySelectorAll('.product-image');
let maxHeight = 0;

images.forEach(image => {
  const height = image.offsetHeight;
  if (height > maxHeight) {
    maxHeight = height;
  }
});

images.forEach(image => {
  image.style.height = `${maxHeight}px`;
});

اگه از بوت استرپ استفاده میکنی باید از کلاس های flex یا grid استفاده کنی که توی مستندات بوت استرپ هست