How to make img with different size fluid with same height?

Hello everyone, i hv got stuck in below problem of fluid image for a while –

Tell us what’s happening:
In the 5th practice of the RWD course, the demo shows six fluid pics (3 in a row, with different size) that are fluid and have same height.

The main difficulty for me is to unify height of images without using absolute unit. And I have tried height: auto/max-height: 100%/object-fit: fill | contain – all of them don’t work.

I have tried displaying the images by making them background-image of their container respectively, this works in general but the visitor can’t download the images then :frowning:

Any thought / sharing will be appreciated, thanks!

Your code so far
(starts from line 92 and ends at line 118)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.116 Safari/537.36.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

It looks like you just included the link to the project template, rather than your own pen. Could you please update the link?

thanks for reminding! just put the correct link.

Trying to set height by percentage can get…complicated:

I may have misunderstood the question, but if your problem is that you have multiple images and you want them all to be the same height as each other then you’re going go need to get explicit. You can make the original images the same size, hardcode a size, or use clipping or masking to hide part of the images.

The way the images are used I wouldn’t really say they are meant to be downloaded. I would suggest using background-position: center on the .pic class to center the images.

If you want help with using image elements it would be better if you posted a Codepen with your attempt. You can just fork your project to work on a second version so it does not affect the one you have now.

Just an FYI, the example project is using CSS Grid for the image grid, not flexbox. Also, the height is calculated as calc(100% - 68px). The 68px is the height of the text box below the image.

thanks both, and i didn’t try the grid way, seems that i rely on flexbox too much :joy: :joy:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.