I am trying to create a meme page and have containers filled with images. Some images are wide and some are super long, I want to display them in a way such that the container is of set size (for example 50% screen width, height can be auto) and the image inside is cropped and centered. I think it is best to illustrate it with some photos.

This is what I want:

And this is what I am getting:

The key is getting these white stripes on the top and bottom if the image is too wide and left and right if the image is too long.

Here is my CSS code:

.homePage {
  width: 100%;
  min-height: calc(100vh - 80px);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.homePage .post {
  width: 50%;
  background-color: rgb(250, 250, 250);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  margin: 20px;
  padding: 20px;
  border-radius: 15px;
}

.post .postHeader {
  display: flex;
  justify-content: center;
  width: 100%;
}

.postHeader .title {
  flex: 50%;
}
.postHeader .deletePost {
  flex: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.deletePost button {
  border: none;
  background: none;
  font-size: 30px;
  cursor: pointer;
}

.post .postImgContainer {
  word-wrap: break-word;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content:center;
  overflow: hidden;
  overflow-y: auto;
}

And my HTML code:

<div className="homePage">
      {imageLists.map((image) => {
        return (
          <div className="post">
            <div className="postHeader">
              <div className="title"></div>
            </div>
            <div className="postImgContainer">
              {" "}
              <img src={image}></img>{" "}
            </div>
          </div>
        );
      })}
</div>

Whenever I change flex-direction from column to row in .postImgContainer it seems to be working, but only for one case of images, the other are getting stretched out.

Thank you for your help!