Bootstrap 4 Grid Row - изображения не выровнены по вертикали

Question

У меня есть ряд изображений, которые по какой-то причине не выравниваются по вертикали. Если я использую все те же изображения, это выглядит нормально, но если я заменю другим изображением с немного другими размерами, это не сработает. Ниже приведен пример:

Вот мой HTML-код. проблема

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

// CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css);

.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
    color: #2E2E2E;

}

Answer 1

Вы пытались указать высоту для вашего изображения? А затем примените свойство Object-Fit CSS .

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