Images to fit its container preserving size ratio-CodePudding

I have several images to render and I want them to keep the same size ratios as they are. For instance, if there is a person with a height of 183cm and another with 170cm, I would like them to preserve those differences in comparison between them, so the user can see that on the screen as in the reality, one person is taller than the other. Also, each image has a different height as the person in the image is cropped, but the same width.

For example, one image could be width: 400px height 340px, and another could be width 400px height: 800px. I have a container with:

.container-images {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    height: 400px;
    max-height: 400px;
    max-width: 418px;
    width: 100%;
}

And the images:

.container-images img {
    height: 60%;
    object-fit: contain;
    width: 100%;
}

At the moment I can not make the images display with a similar ratio on their container, they all have the same height. Also, the images should sit at the bottom of its container, for that i am using align-items: flex-end; I hope someone can help me. Thanks in advance.

CodePudding user response：

Seems to work pretty much as expected. What seems to be your problem?

.container-images {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  height: 400px;
  max-height: 400px;
  max-width: 418px;
  width: 100%;
}

.container-images img {
  width: 50%;
  object-fit: contain;
  background-color: black;
}

<div  style="background-color: red;">
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" />
</div>
<div  style="background-color: blue;">
  <img src="https://www.w3schools.com/css/paris.jpg" />
</div>

CodePudding user response：

let's try this:

.container-images {
align-items: center;
display: flex;
justify-content: center;
height: 300px;
width: 300px;
}

for images:

.container-images img {
height: 100%;
object-fit: cover;
width: 100%;
}