html - 如何根据 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 属性 object-fit 确保图像适合它的父元素的大小 https://css-tricks.com/almanac/properties/o/object-fit/