Images to fit its container preserving size ratio

Question

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.

cSharp · Accepted Answer · 2022-04-29T01:13:08.580

1

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 class="container-images" style="background-color: red;">
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" />
</div>
<div class="container-images" style="background-color: blue;">
  <img src="https://www.w3schools.com/css/paris.jpg" />
</div>

edited Apr 29 '22 at 01:13

answered Apr 29 '22 at 00:54

cSharp

2,884
1
6
23

Thanks for your answer @cSharp unfortunately, at the moment the images get displayed the same sizes for each one. I would like them to preserve the same ratios. In my case, the issue is the height rather than the width due to they are people and in comparison, they should be a difference on the height of each person. – Joaquin Palacios Apr 29 '22 at 00:57
I'm not exactly sure what's happening. Could you update your question with a screenshot of what is happening? Thank you. – cSharp Apr 29 '22 at 00:59
It has been updated @cSharp thanks – Joaquin Palacios Apr 29 '22 at 01:05
Are all your images the same `width`? – cSharp Apr 29 '22 at 01:10
Yes, they are all same width, but not the same height. The issue with using max-height: 100%; is that the images outgrow its container. For that, in the code I used height: 60%; – Joaquin Palacios Apr 29 '22 at 01:12
1

I think setting only `width` equal to some value that you'll have to manually check and see that no image is outgrowing the container (like I did with `50%` in the edited answer) is a solution. – cSharp Apr 29 '22 at 01:14
It does help, but it shrinks only the big images making them sort of similar. I am trying your approach with something else meanwhile. – Joaquin Palacios Apr 29 '22 at 01:21

score 0 · Answer 2 · answered Apr 29 '22 at 00:55

0

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%;
}

answered Apr 29 '22 at 00:55

M. Sufyan Sheikh

31
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 29 '22 at 03:02

Images to fit its container preserving size ratio

2 Answers2