I have a set of images that have different widths and heights, their height to width ratios are not the same. Is it possibly to make a tiled gallery of these images without any space between rows or columns ie. with completely 100% fill a div with images using only CSS? Leaving space on the last row would be fine but it would be better to have none.

I am trying to create a responsive island scenescape by overlaying three elements: I would like to place the palm tree on the sand island to the left, and position the text to float in the space to the right of the tree, but above the sand.

For some time now, I’ve been struggling with adjusting the height of an image to match the remaining height in a flex container with a column orientation. In the main container, I have one <div> tag that is also a flex container and contains several elements (in real case senario its exact height may be dynamic). The main container also contains an <img> tag. I would like the <img> tag to adjust its height and width to the remaining area in the main container.