Is it possible to add white background to transformed images?

Question

For a client eCommerce project I am working on all the product images are on white backgrounds, so they blend nicely with the background of the site. Currently I am putting all the images through a fit transform (480px by 480px), so that parts of the image aren't cut off.

The images are of different shapes and sizes and are transformed something like this (the grey area is the actual visible product part of the image)

However, I am trying to achieve something like this, so all the images are 480px by 480px, and the visible content is slap bang in the middle. Anything extra is added as whitespace to make all the images the same dimensions.

Is this something Craft can do and I am just being a dolt?

Update

At the risk of this question being closed as off topic, please note that I am not looking for a CSS/JS related answer for this.

I'm trying to find out if there is a way Craft can process the images for me, perhaps with ImageMagick or something similar to achieve what I am hoping for.

Answer 1

Unless one of the devs say otherwise, Craft's image processing is resizing only. They do not add anything to the image.

Answer 2

Even if it was possible to do that with image transforms in Craft, why would you do that. You produce unnecessary data or image artifacts if you work the background into your images.

Here's how to achieve the same effect with css:

/**
 * 1. Positions the image absolutely to its container.
 * 2. Sets the bounding box for the image.
 * 3. Centers the image in both directions.
 * 4. Make the container's aspect ratio 1:1 by default.
 * 5. Shrinks the image to fit its bounding box.
 */

.Letterbox {
  position: relative; /* 1 */
  padding-top: 100%; /* 4 */
}

.Letterbox > img {
  position: absolute; /* 1 */
  margin: auto; /* 3 */
  top: 0; /* 2 */
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%; /* 5 */
  max-height: 100%; /* 5 */
}

.

Resources:

• "CSS: A way to maintain aspect ratio when resizing a DIV?"
• "Absolute Horizontal And Vertical Centering In CSS"