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

【问题标题】：Product cards image resize automatically产品卡片图像自动调整大小
【发布时间】：2021-07-31 20:21:01
【问题描述】：

我正在为电子商务网站创建一个 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>

CSS：

.img-card{
    height: auto;
    max-height: 250px;
    width: auto;
}

【问题讨论】：

标签： html css reactjs bootstrap-4

【解决方案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
}

方法二

使用纵横比https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

.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
}

【讨论】：