لدي مشكلة في cards لا تأتي بنفس الطول

Klodea Abu Sbah · 21 أغسطس 2022

انا استخدم bootstrab لكن البطائق لا تأتي بنفس المستوى ممكن حل

<div class="card mb-4 p-1" >
  <a href="#"><img src="css/background.png" class="card-img-top" alt="...">
    <div class="card-body p-0">
      <h5 class="card-title ">أحمد حيدر</h5>
      <p class="card-text text-dark">خبرة في مجال كمال الأجسام منذ أكثر من 15 سنة خريج الجامعة الصينة تخصص تغذية</p>
    </div>
  </a>
  <ul class="list-group list-group-flush">
    <li class="list-group-item"><i class="fa-solid fa-calendar-day"></i> العمر: <span class="text-primary">32</span></li>
    <li class="list-group-item"><i class="fa-solid fa-dumbbell"></i> عدد المتدربين: <span class="text-primary">54</span></li>
  </ul>
  <div class="card-body">
    <a href="#" class="coach-image">
      <img src="css/image1.jpg" class="rounded-circle" width="40px" alt="coach image">
      <span class="card-text">أحمد حيدر</span>
      <span class="card-text float-left text-warning"><span>5.0</span><i class="fa-solid fa-star"></i></span>
    </a>
  </div>
  <div class="card-footer" >
    <div>
      <a href="#" class="card-link btn btn-success">اشترك الأن</a>
      <a href="#" class="card-link btn btn-outline-info">دردشة</a>

    </div>
  </div>
</div>

أسامة زيادة · 21 أغسطس 2022

عند ملاحظة البطاقات سوف نلاحظ أن السبب في عدم ظهور البطاقات بنفس الحجم هو الصور ، فأنت تستخدم صور بعدّة أحجام وليست موحدة على جميع الصور ، يمكنك معالجة المشكلة باستخدام صور ذات طول وعرض موحد على جميع الصور وهكذا سوف تظهر بنفس الطول أو يمكنك عمل التالي :-

نقوم بإنشاء صنف جديد لنسميه مثلاً image-style ونعطيه للوسم img

<a href="#">
  <img src="css/background.png" class="card-img-top image-style" alt="...">
  <div class="card-body p-0">
    <h5 class="card-title ">أحمد حيدر</h5>
    <p class="card-text text-dark">خبرة في مجال كمال الأجسام منذ أكثر من 15 سنة خريج الجامعة الصينة تخصص تغذية</p>
  </div>
</a>

وفي تنسيقات css نقوم بإعطائه التنسيقات التالية ، ويمكنك وضع حجم height الذي تراه مناسب لصور

.image-style {
    width: auto;
    height: 280px;
}

وهكذا سوف تظهر الصور بنفس الطول ، لكن يفضل دائماً استخدام صور ذات طول وعرض موحد على جميع الصور .

Kais Hasan · 28 أغسطس 2022

هناك صنف من أصناف ال bootstrap مخصص لهذه الحالة و يسهل العمل كثيراً، حيث أنك لن تحتاج إلى أي تعديل يدوي على ال css.

هذا الصنف هو img-fluid حيث أنه يقوم بإعطاء الصورة عرض كامل و طول تلقائي و كل ذلك بالنسبة للعنصر الأب الذي يحتويها، ينصح باستعمال هذا الصنف حيث أنه responsive أكثر من إعطاء قيم ثابتة، فمثلاً عند استعمال أجهزة مختلفة سيبقى الشكل متناسق تلقائياً.

يمكنك إضافته على الصور لديك بالشكل التالي:

<img src="css/background.png" class="img-fluid card-img-top" alt="...">

لدي مشكلة في cards لا تأتي بنفس الطول

السؤال

Klodea Abu Sbah

2 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

Kais Hasan

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية