This question already has an answer here:

If I have a grid of images, let's say political cartoons, that have differing aspect ratios and cannot be cropped, how can I display them in a grid or even linear fashion?

This is for a newspaper website, I have hundreds of political cartoons that cannot be cropped to a consistent aspect ratio due to content. I can display them linearly, top to bottom, but I would rather have a grid of some sort.

New cartoons will be added regularly, so the whole thing needs to be flexible.


marked as duplicate by Shreyas Tripathy, Andrew Martin, JonW Apr 24 '18 at 9:24

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 1
    This is kinda broad, what are you trying to achieve? A poster, a page for a magazine, a webpage ? An image with at least rectangles of those images/aspect ratios would help. Will you continue adding images and the grid should be responsive and adapt or it's a fixed number? For now I am voting to close as too broad. – Alin Apr 21 '18 at 4:56
  • This depends allot on your requirements as mentioned by Alin. Is it required that the whole image stays visible? Otherwise zoom-copping might be useful. If the page needs quick navigation an asymmetrical look might not be a good option. You should write down some requirements ;) – Rolf ツ Apr 22 '18 at 16:04
  • Do you need to keep the timeline of the cartoons (i.e. the newest first) or can they be placed at random order? – Mike Apr 24 '18 at 6:58
  • Timeline is important. – Dan Gayle Apr 24 '18 at 18:37

You have at least two options.

  1. To create an optimal grid based on the available space, like a mason fitting stones in a wall, you can use a JS library designed for that purpose.

  2. For a more symmetrical look, you can use a grid of identical background containers. This technique is commonly used to showcase logos -- see this example.

    Create a grid of, let's say, four rows x four columns of white containers, each 300 x 300 pixels. These would serve as the 'canvases' for your images, which you would resize (maintaining the ratios) and insert appropriately.

Not the answer you're looking for? Browse other questions tagged or ask your own question.