سرمایه گذاری متفاوت در سال نو 🍎🌱 ۳۵٪ تخفیف نوروزی ➕ حضور رایگان در مسترمایند نخبگان صنعت نرم‌افزار 💻✅
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ محدثه اسفندیاری
کنار هم قرار نگرفتن عکس‌ها در container
جامعه Html & CSS ایجاد شده در ۱۲ اسفند ۱۴۰۳

https://codepen.io/Mohadese-Esfandiari/pen/wBvgVWv

سلام و عرض ادب 

من ابنجا هر کار میکنم در حالت L,xL   عکس‌ها 3 تا کنار هم نمی‌افته و بعضی از عکس‌ها خیلی بزرگتر هستند درحالی سعی کردم عکس هایی با عرض‌های کم پیدا کنم 

 

image-zevghimj.png

 

سلام. وقتتون بخیر
تصاویر رو از سیستمتون می‌خونه لطفا آپلود کنید و لینک تصویر رو در src بذارید تا در کدپن نمایش داده بشه. 
این موارد رو امتحان بفرمایید:
1. در CSS شما برای تصاویر از width: 100% و height: auto استفاده کردید که باعث می‌شه تصاویر نسبت به فضای کارت کشیده بشن. اگر تصاویر شما نسبت ابعاد مختلفی داشته باشن (مثلاً برخی عریض‌تر یا بلندتر باشن)، این تنظیم باعث می‌شه اندازه تصاویر متفاوت نمایش داده بشن.
برای اطمینان از اینکه تصاویر در تمام کارت‌ها یک اندازه هستن، می‌تونید از aspect-ratio یا تنظیم دستی ارتفاع و عرض استفاده کنید. به عنوان مثال:

.card-header img {
  object-fit: cover;
  width: 100%;
  height: 200px; /* ارتفاع ثابت برای تمام تصاویر */
}

2. بررسی کلاس‌های Grid: کدتون کامل نیست، مطمئن بشید به درستی از اسم کلاس‌ها استفاده می‌کنید. مثلا ممکنه شما col-sm-6 تعریف کرده باشید ولی به المانتون col-s-6 داده باشید.
3. کلاس mr-20 که به کارت‌ها اعمال شده، باعث ایجاد فاصله افقی بین کارت‌ها می‌شه. این فاصله ممکنه در ترکیب با Grid باعث شه که کارت‌ها در یک ردیف جا نشن. به جای استفاده از mr-20، می‌تونید از سیستم فاصله‌دهی خود فریم‌ورک (مثل Bootstrap) استفاده کنید یا اون رو حذف کنید.
4. لطفا کد پروژتون رو "به طور کامل" بگذارید در کدپن. 

سحر پاشائی ۱۴ اسفند ۱۴۰۳، ۰۸:۳۷