پارسا صابر
1 سال پیش توسط پارسا صابر مطرح شد
1 پاسخ

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

سلام دوستان وقتتون بخیر
میخواستم ببینم چطور میتونم تصاویر آرشیو محصولات رو با استفاده از css یا بوت استرپ هم تراز کنم یعنی ارتفاع یکسان داشته باشن
غیر از اینکه خودم به همشون یک ارتفاع مشخص بدم راه دیگه ای هم هست؟


ثبت پرسش جدید
Arshiamohammadei
تخصص : وب و هوش مصنوعی
@Arshiamohammadei 1 سال پیش مطرح شد
0

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

  1. استفاده از Flexbox: با استفاده از خصوصیات Flexbox، می توانید تصاویر را به صورت خودکار به یک ارتفاع یکسان تراز کنید. برای این منظور، کانتینر حاوی تصاویر را به عنوان flex container تعریف کنید و از خصیصه align-items: stretch در استایل آن استفاده کنید. این خصیصه باعث می شود تمام اجزای داخل کانتینر با ارتفاعی یکسان نمایش داده شوند.
.container {
  display: flex;
  align-items: stretch;
}
  1. استفاده از Grid: اگر از سیستم Grid CSS استفاده می کنید، می توانید تصاویر را در شبکه قرار داده و اطمینان حاصل کنید که ارتفاع آنها یکسان است. با استفاده از خصیصه grid-auto-rows: 1fr در استایل کانتینر، ارتفاع تصاویر را به صورت ضمنی مشخص کنید.
.container {
  display: grid;
  grid-auto-rows: 1fr;
}
  1. استفاده از جاوااسکریپت: می توانید از جاوا اسکریپت برای تراز کردن ارتفاع تصاویر استفاده کنید. با استفاده از جاوا اسکریپت، ارتفاع تمام تصاویر را محاسبه کنید و بزرگترین ارتفاع را به عنوان ارتفاع مشترک تنظیم کنید.
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 استفاده کنی که توی مستندات بوت استرپ هست


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

ورود یا ثبت‌نام