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
Any thought / sharing will be appreciated, thanks!
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.
