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.


  • 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.

| improve this answer | |

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