Html 产品卡图像自动调整大小

我正在为一个电子商务网站创建一个CRUD应用程序。我正试图展示产品卡片。但是，我想确保上传的每个图像都会自动调整大小，以便无论发生什么情况，卡片都能对齐

带引导的HTML：

<div className="card h-100">
    <a href="#!">
        <img
            className="img-fluid w-100 img-card"
            src={`/uploads/${product.fileName}`}
            alt="product"
        />
    </a>
</div>

---

由于您使用的图像可能具有不同的分辨率，因此 我通常的做法是：

方法1

 <div className="card h-100">
    <a href="#!">
     <div class="img-container">
      <img
        className="img-fluid w-100 img-card"
        src={`/uploads/${product.fileName}`}
        alt="product"
      />
    </div>
    </a>
</div>

.img-container {
   position: relative;
   overflow:hidden;
   height: 300px; (your wish)
}

.img-container img {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  object-fit: cover
}

 <div className="card h-100">
    <a href="#!">
     <div class="img-container">
      <img
        className="img-fluid w-100 img-card"
        src={`/uploads/${product.fileName}`}
        alt="product"
      />
    </div>
    </a>
</div>

.img-container {
   position: relative;
   overflow:hidden;
   height: 300px; (your wish)
}

.img-container img {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  object-fit: cover
}

.img-container {
   padding-bottom: 75%; 
   height: 0;
   overflow: hidden;
   position: relative;
}

.img-container img {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  object-fit: cover
}