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

CC BY-SA 3.0
2014-11-05T15:26:14.943Z
Thanks Bryan, looks like another case of me trying to do the impossible!
Jamie Wade
CC BY-SA 3.0
2014-11-05T14:09:50.340Z
2014-11-05T14:09:50.340Z
Bryan Redeagle
<p>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.</p>

<p>Here's how to achieve the same effect with css:</p>

<pre><code>/**
 * 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 &gt; img {
  position: absolute; /* 1 */
  margin: auto; /* 3 */
  top: 0; /* 2 */
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%; /* 5 */
  max-height: 100%; /* 5 */
}
</code></pre>

<p>.</p>

<p>Resources:</p>

<ul>
<li><a href="https://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div">"CSS: A way to maintain aspect ratio when resizing a DIV?"</a></li>
<li><a href="http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/" rel="nofollow noreferrer">"Absolute Horizontal And Vertical Centering In CSS"</a></li>
</ul>

CC BY-SA 3.0
2014-11-05T15:05:02.463Z
2014-11-05T15:05:02.463Z
2017-05-23T12:38:53.957Z
carlcs
<p>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.</p>

<p>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)</p>

<p><img src="https://i.sstatic.net/vRZ8k.png" alt="enter image description here"></p>

<p>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.</p>

<p>Is this something Craft can do and I am just being a dolt?</p>

<p><img src="https://i.sstatic.net/0G4XT.png" alt="enter image description here"></p>

<p><strong>Update</strong></p>

<p>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.</p>

<p>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.</p>

CC BY-SA 3.0
2014-11-05T10:14:34.587Z
To display them in a rectangular div with white background is no option?
carlcs
CC BY-SA 3.0
2014-11-05T10:16:55.423Z
@carlcs Unfortunately not, sorry I forgot to mention the site is fully responsive, so the images will all have to scale up and down together.
Jamie Wade
CC BY-SA 3.0
2014-11-05T10:20:35.413Z
You could use js to take care of the aspect ratio.
carlcs
CC BY-SA 3.0
2014-11-05T10:24:51.693Z
It's even possible with css only! Just found a nice solution on StackOverflow: ["Responsively change div size keeping aspect ratio"](http://stackoverflow.com/a/12121309)!
carlcs
CC BY-SA 3.0
2014-11-05T15:14:45.970Z
Jamie, I think you should not worry about your question being closed only because there's answers possible that do not relate to Craft very much.
carlcs
<image-transforms><image>
Is it possible to add white background to transformed images?
# Is it possible to add white background to transformed images?

(Asked by: username_0 on 2014-11-05)

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)

![enter image description here](https://i.sstatic.net/vRZ8k.png)

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?

![enter image description here](https://i.sstatic.net/0G4XT.png)

**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.

**Tags:** image-transforms, image

> **Comments:**
> **username_1**: To display them in a rectangular div with white background is no option?  
> **username_0**: @username_1 Unfortunately not, sorry I forgot to mention the site is fully responsive, so the images will all have to scale up and down together.  
> **username_1**: You could use js to take care of the aspect ratio.  
> **username_1**: It's even possible with css only! Just found a nice solution on StackOverflow: ["Responsively change div size keeping aspect ratio"](http://stackoverflow.com/a/12121309)!  
> **username_1**: Jamie, I think you should not worry about your question being closed only because there's answers possible that do not relate to Craft very much.  

---

## 2 answers

### Answer by username_2 on 2014-11-05. Score: 3

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

> **Comments:**
> **username_0**: Thanks Bryan, looks like another case of me trying to do the impossible!  

---

### Answer by username_1 on 2014-11-05. Score: 1

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"


---

