I am wanting create a display wall (rows) of images with various aspect rations. (Think like an Instagram wall, but with different sized images, not just square crops)
However, I want the left and right margins to be aligned and for there to be a constant spacing between each image.
So the way to do this is to have the height of each row vary so that the width of each images expands until it is the right width to completely full up the required space.
I could use JavaScript to keep a running tally of the space available and math that against the aspect ratio of each of images.
However I feel this is something I can/should do in (more or less) vanilla css (perhaps using flexbox).
How do I create a table/grid of images, with each row an equal width; with a varied row height, to leave a consistent gap between each of the images? (with a minimal amount of js)
I am wanting to display a wall (rows) of images of various aspect rations. (Think like an Instagram wall but with different sized images, not just square crops)
However, I want the left and right margins to be aligned and for there to be a constant spacing between each image.
So the way to do this is to have the height of each row vary so that the width of each images expands until it is the right width to completely full up the required space.
I could use JavaScript to keep a running tally of the space available and math that against the aspect ratio of each of images.
However I feel this is something I can do in (more or less) vanilla css (perhaps using flexbox).
How do I create a table/grid of images, with each row an equal width; with a varied row height, to leave a consistent gap between each of the images? (with a minimal amount of js)