On my site, images of any shape can be uploaded, for example:
I want these to display in a grid where every image is the same size and shape (in my case, square) - due to the nature of the images, I don't want to use cropping and I don't want any distortion of the aspect ratio, but the backgrounds can be extended. This also needs to be applied to the image itself, not a CSS wrapper.
For example, I'd like the end result to look like this:
Everything I've tried using various combinations of "scale" and "resize" either doesn't give consistent final sizes depending on whether the original was tall or wide, or distort the image. Cropping isn't an option. How can I do this?