Как отображать изображения в html карточках и контейнерах одинакового размера

Question

Новое в кодировании. Я пытаюсь отобразить страницу со списком элементов базы данных, включая изображения. Я использую таблицу HTML и карты для отображения 2 карт подряд. Это работает, но поскольку размер изображения для каждого изображения разный, макет запутан и не единообразен, как показано ниже.

Снимок экрана

Вот мой код

  <style> 
    
    .card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 60%;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

imga {
  border-radius: 5px 5px 0 0;
  
  
}

.container {
  padding: 2px 16px;
  

}
</style>

Также см. Соответствующий html php код

      if($tableflag % 2==0){ ?>
    
    
    <table>
<tbody>
<tr>
<td><span class="card" style="display: inline-block;">
  <img width="auto" height="100" class="imga" src=<?php echo $thumbimagesrc; ?> alt="Image Not Available" style="width:100%">
  <span class="container">
    <h5><b> <?php echo $itemname; ?></b></h5> 
    <p>  <?php echo $itemcode; ?> </p> 
  </span>
</span></td> <?php $tableflag++; ?>

<?php
     }
     else{ ?>
         <td><span class="card" style="display: inline-block;">
  <img width="400" height="100" class="imga" src=<?php echo $thumbimagesrc; ?> alt="Image Not Available" style="width:100%">
  <span class="container">
    <h5><b> <?php echo $itemname; ?></b></h5> 
    <p>  <?php echo $itemcode; ?> </p> 
  </span>
</span></td> 
</tr>
</tbody>
</table><?php $tableflag++; ?>
         
    
    <?php     
     }
     
  }
}

Пробовал изменить ширину, максимальную ширину и т. Д. c. но по-прежнему не может получить карточки одинакового размера. Заранее спасибо.