Worked fine by fixing all image are in same height and width.

Solution:

Using object-fit: contain; along with some specific height (Which
suits your design) we will able set all size images in a container

body {
    margin: 10px;
}
img{  
      object-fit: contain;
      height: 60px;
      width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
         <img width="100" height="100" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
        </div>
        <div class="col-md-4" style="background-color: yellow">
          <img width="100" height="100" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>
        <div class="col-md-4" style="background-color: green">
         <img width="100" height="100" src="https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
        </div>
    </div>
</div>

I have created a design for users to select different templates. All functions work fine, but I have an issue with my card design because of the different image sizes.

I have tried all the ways using flex on row and column, fixed image size and card size but it has not worked.

Here is my current screen:

        <div class="row">
          <? $sql = mysqli_query($conn,"SELECT * FROM payslip_template WHERE status = 'a'");
          $i = 1;
          while($row = mysqli_fetch_array($sql)) { ?>
            <div class="col-md-4 imgcol">
              <div class="card imgcard" id="imgcard_<? echo $i; ?>" <? if($row[ 'temp_default']=='y' ) { ?>style="background-color:#8a7f83;"
                <? } else { ?> style="background-color:#dedad1;" <? } ?>>
                <div class="card-title text-center imgtitle">
                  <?= strtoupper($row['name']); ?>
                </div>
                <div class="card-body">
                  <img src="<?= $row['temp_image']; ?>" class="img-fluid">
                  <div class="row btnrow">
                    <div class="col-md-6">
                      <button type="button" class="<?= $BUTTON_CLASS_DEFAULT; ?>" onclick="defaultact(this.value);" value="<?= $row['aid']." _ ".$i; ?>" style="width: 100%">
                      <i class="<?= $ICON_CLASS_DEFAULT; ?>"></i>
                      Default
                    </button>
                    </div>
                    <div class="col-md-6">
                      <button type="button" class="<?=$BUTTON_CLASS_PREVIEW; ?>" onclick='preview(this.value)' ; value="<?= $row['temp_image'];?>">
                      <i class="<?=$ICON_CLASS_PREVIEW; ?>"></i>
                      Preview
                    </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <? $i++; } ?>
        </div>