Ini mungkin mudah tetapi saya tidak tahu bagaimana untuk membetulkannya.

Saya menggunakan Bootstrap5.

Kod penuh di sini: https://www.codeply.com/p/BywuhLNUXy

Nampaknya codeply mempunyai beberapa masalah... Jadi saya meletakkannya pada jsfiddle juga

https://jsfiddle.net/paul_z/y7a6dnkf/1/

Terutamanya halaman direktori kenalan. Struktur kod ialah

 
 
 
 
 
 
  
 
 
 user 1
 
CDD IT Informatique
 
 
 ###
 
 mail
 
 phone
 
 
 
 
 
 ...

Pada skrin besar, ia memaparkan dua kad dalam lajur.

Masalahnya ialah kad kadangkala mempunyai ketinggian yang berbeza. Contohnya, untuk pengguna 2, peranannya berubah kepada: "Enseignant Chercheur Astrophysicalque Hautes Energies" dan bukannya "CDD IT Informatique", jadi baris ini memerlukan dua baris dan bukannya satu. Jadi kad pengguna 2 mempunyai ketinggian yang berbeza daripada kad lain.

Bagaimana saya boleh menyelesaikannya? Saya tidak tahu saiz kad itu, jadi saya tidak boleh membetulkannya secara tersirat (yang mungkin bukan idea yang baik).

P.S.: Saya akan mengalami masalah yang sama jika logo adalah saiz yang berbeza. Sesetengah logo menukar ketinggian kad walaupun menggunakan img-fluid, widht, max-widht, max-height, dsb. Tetapi saya fikir pertama saya perlu menyelesaikan masalah ketinggian yang mudah.

Code snippet .card { height: 100%; } This will set the height of all cards to 100% of their parent container. This will ensure that all cards have the same height, regardless of the content inside them. To fix the problem of the logos having different sizes, you can use the following CSS: Code snippet .card img { max-width: 100%; max-height: 100%; object-fit: cover; } This will set the maximum width and height of the logos to 100%. This will ensure that the logos are never larger than their parent container. The object-fit: cover property will ensure that the logos are scaled to fill their container, without distorting their aspect ratio. I hope this helps

.card { height: 100%; }