イメージのサイズを変更し、divサムネイルに基づいてイメージを比例に保つにはどうすればよいですか？

Question

私はdivに表示されているいくつかの画像を以下の画像のように持っています。別のサイズの画像をアップロードすると、サムネイルの画像は比例したサイズで表示されます。手伝ってくれてありがとう。

<div class="col-md-4 product simpleCart_shelfItem text-center" style="height:500px;"> 
    <a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>"> 

    <!--img src="admin/<?php echo $r['gambar']?>" width="394" height="480" alt="" /--> 
    <img src="admin/<?php echo $r['gambar']?>" height="450" alt="" /> 
    </a> 
    <?php if ($r['diskon'] != '' && $r['diskon'] != '0') { ?> 
    <a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>"> 
     <div class="offer3"> 

     <span class="badge"> 
      <span class="badge"> 
      <span class="badge"><?php echo "Sale "."$r[diskon]"."%" ?> 
      </span> 
      </span> 
     </span> 

     </div> 
    <?php } ?> 


    <div class="mask"> 
     <a href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>">Quick View</a> 
    </div> 
    <a class="product_name" href="?page=detail&id=<?php echo $r['idbarang']?>&id2=<?php echo $r['idstok']?>"> 
     <?php echo $r['namabarang']?> 
    </a> 
    <?php if ($r['diskon'] == '' ) { ?> 
     <p> <span class="item_price"> <?php echo $harga ?></span></a></p> 
    <?php } ?> 
    <?php if ($r['diskon'] == '0' ) { ?> 
     <p> <span class="item_price"> <?php echo $harga ?></span></a></p> 
    <?php } ?> 

    <?php if ($r['diskon'] != '' && $r['diskon'] != '0') { ?> 
     <p> <font face="comic sans ms" color="brown" size="2"><strike> <?php echo $harga ?></strike></font></p> 
     &nbsp; <p><span class="item_price"> <?php echo $diskon ?></span></p> 
     </span></a></p> 
    <?php } ?> 

    </div> 

Answer 1

あなたがページ上に任意のサイズの画像を配置すると、それは同じサイズで表示されている場合は、イメージが、それはCSSのプロパティオブジェクトフィット https://css-tricks.com/almanac/properties/o/object-fit/