Html 引导4网格行-图像未垂直对齐

我有一排由于某种原因没有垂直对齐的图像。如果我使用所有相同的图像，它看起来很好，但是如果我用一个尺寸稍有不同的图像替换，它就不起作用了。下面是一个例子：

这是我的HTML代码。注意，我正在使用一些自定义CSS进行覆盖，不确定这是否会导致问题

<div className="container">

          <div className="row">

            <div className="col-xl-12 mx-auto mb-3">
              <h2 className="abouthead">Portfolio</h2>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-4 col-md-12 mb-4">
              <div
                className="view overlay hm-black-strong"
                data-toggle="modal"
                data-target="#modal1"
              >
                <img
                  src="http://localhost:3002/images/dealmazing.JPG"
                  className="img-fluid"
                  alt="sample"
                />
                <div className="p-2 bg-info text-white">Deals Website</div>
                <div className="mask flex-center">
                  <p className="white-text">View Project</p>
                </div>
              </div>
            </div>

            <div className="col-lg-4 col-md-12 mb-4">
              <div
                className="view overlay hm-black-strong"
                data-toggle="modal"
                data-target="#modal2"
              >
                <img
                  src="http://localhost:3002/images/crypto-portal.JPG"
                  className="img-fluid"
                  alt="sample"
                />
                <div className="p-2 bg-info text-white">
                  Cryptocurrency Portal
                </div>
                <div className="mask flex-center">
                  <p className="white-text">View Project</p>
                </div>
              </div>
            </div>

            <div className="col-lg-4 col-md-12 mb-4">
              <div className="view overlay hm-black-strong">
                <img
                  src="http://localhost:3002/images/dealmazing.JPG"
                  className="img-fluid"
                  alt="sample"
                />
                <div className="p-2 bg-info text-white">Deals Website</div>
                <div className="mask flex-center">
                  <p className="white-text">View Project</p>
                </div>
              </div>
            </div>

            </div>

---

}

您是否尝试为图像指定高度？然后应用属性

img {
  object-fit: cover;  
  width: 400px;
  height: 400px;  
}

---

非常感谢，我不熟悉object fit属性，所以感谢您让我知道这一点。

img {
  object-fit: cover;  
  width: 400px;
  height: 400px;  
}