I don't even see how the aspect ratios vary that much. Maybe just add the images to the game in a folder instead of using urls (unless this is intended to be a mobile game). You can position them however you want and they'd still expand and shrink according to your liking.Īlso - while your code looks pretty unreadable, the end-product seems fairly simple. You don't have to literally order the divs in a grid. I don't see why the grid solution shouldn't work. Though you have to set img max-width: 100% for inline-flex to do what I want, and setting img max-height: 100% makes the image height equal to line-height, which would probably be a complexity even with a mythical 'vertical inline-flex'. What there needs to be is something like a vertical inline-flex. The closest would be max-height: vh, but it requires every row to be given a unique percent of the height (every image or row would have to be given its own unique div class), and rows cannot drop beside each other.

I have been able with inline flex to get such a setup to change size all together sideways, but everything vertical wants to allow overflow and add a scroll-bar. I am having to use a workaround for now: I have it on Itch.io and have the size set so that everything is visible.īasically there are 11 images each with unique aspect ratios which they must maintain, some of them in rows, one of which drops next to another row with a wider view one of the individual images is at times replaced with 19 images in three rows which must take up the same space as the image they replace.

Vertical shrink