I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case.
Here are two images that I manually resized so you can view them side by side:
highly vertical image
very horizontal image
The vertical image could potentially be over 10,000px tall, while the horizontal one may reach up to 4,000px wide. The sizes vary greatly.
I want to arrange these images in a grid format, where each image fits in a square space. If an image is tall, it will be compressed horizontally. The layout I have in mind is something like this:
https://i.stack.imgur.com/lc0KI.png
The ideal square size is 250x250px. If an image is too tall, it shrinks horizontally to fit within the grid. If it's too short but wide, it expands vertically but only up to 250px. The images are aligned at the bottom of the grid. They don't follow any specific order.
In my situation, I'm converting an `ArrayBuffer` or `File` object into an image using the dataURI system. I believe I can access the actual width and height of the image for necessary calculations. Since pure CSS doesn't seem to solve the issue, what kind of trick or simple algorithm could I use to achieve this layout? Would JavaScript be necessary? I've been trying to solve this problem for hours.