On my site, images of any shape can be uploaded, for example:

enter image description here

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:

enter image description here

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?

1 Answer 1


If you don't mind applying a block background colour, this seems to be possible with Imagecache Actions module.

  1. Download and enable the Imagecache Actions module and its imagecache_canvasactions submodule.
  2. Add a normal "scale" action to the desired size (300 x 300). This keeps the aspect ratio.
  3. After, add a "Define canvas" action, then set to the same dimensions under "exact size".
  4. Make sure "Resize canvas under image" is ticked, choose an appropriate background colour, and go. This fills in any gaps to the desired size with whatever colour you choose (or transparency if you choose no colour).

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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