Automatically arrange several images to fit a whole web page

Question

Given a bunch a images of different size and ratio, but all rectangular, is there a easy way in javascript/css to assemble them so they fit the whole web page. Such as :

Given the following constraints :

• Images could be, in the process, can be resized down independently, but not up.
• The resizing down should have a size limit (so image could still be visible).
• Images can be reordered at will to fit the best packing
• Ratio must be preserved.

Is there generic/formal terms to describe this process so I can better search for solutions ?

I guess there is no easy, ready-to-use way to do this, like a js library. But does it exist an algorithm that would handle this operation, like form a geometrical point of view of assembling rectangle to fit a bigger rectangle ?

Answer 1

Have you thought about alighning the images in columns and then using CSS media queries to reorganize them acordingly to the size of the web page... Something like this: https://css-tricks.com/seamless-responsive-photo-grid/