I would like to make a gallery of images in the same style of the gallery on Samsung phones (with One UI), when you zoom the most on images. It looks like the screenshot below.
- In a row there can be one (if it's in landscape layout), two, or three (if there are at least two in portrait layout) images
- Images can be of different widths
- Images always occupy the full width of the phone
- Inside a row, images are all the same height
- Two rows can have different heights
Before coding the whole gallery, I first tried to just code one a row (the second displayed on the screenshot: a portrait and a landscape), but even that I didn't managed. I tried:
- using Bootstrap's layout system: with a
.rowparent and two.colchildren withflex-growproperty set to 1 for the first image and 2 for the second image; with.col-4and.col-8classes respectively - setting the height of the images at 100% of the parent
- setting the width at 33%/66% respectively
I also looked at these questions/answers:
But every thing I tried gets me either to have the same height but the images not occupying the full width of the parent element, or the images to occupy the full width of the parent element but not having the same height. The closest I came to the solution was when I manually set the height of the parent to 600px (with the children being 100% of the height of the parent), but that was a lucky move and anyway I don't want the height to be absolutely set.
My question is then: is it possible to achieve what I would like to achieve in pure CSS? If so, how? If not... how?
Also, the gallery would be automatically generated (could be 10 images here, 4 images there), it's not a static one-time-thing, so I would need a solution that would kind of fit all situations. Once again, I'm open to Javascript to add logic.
