如何根据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/