Answers.Body: <p>Unless one of the devs say otherwise, Craft's image processing is resizing only. They do not add anything to the image.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-05T15:26:14.943Z
Answers.Text: Thanks Bryan, looks like another case of me trying to do the impossible!
Answers.UserDisplayName: Jamie Wade
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-05T14:09:50.340Z
Answers.LastActivityDate: 2014-11-05T14:09:50.340Z
Answers.UserDisplayName: Bryan Redeagle
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-05T15:05:02.463Z
Answers.LastActivityDate: 2014-11-05T15:05:02.463Z
Answers.LastEditDate: 2017-05-23T12:38:53.957Z
Answers.UserDisplayName: carlcs
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-11-05T10:14:34.587Z
Comments.Text: To display them in a rectangular div with white background is no option?
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-11-05T10:16:55.423Z
Comments.Text: @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.
Comments.UserDisplayName: Jamie Wade
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-11-05T10:20:35.413Z
Comments.Text: You could use js to take care of the aspect ratio.
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-11-05T10:24:51.693Z
Comments.Text: 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)!
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-11-05T15:14:45.970Z
Comments.Text: 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.
Comments.UserDisplayName: carlcs
Tags: <image-transforms><image>
Title: Is it possible to add white background to transformed images?
ThreadText: # 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**: username_0, 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 username_2, 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?"](https://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div)
  * ["Absolute Horizontal And Vertical Centering In CSS"](http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/)
  
  
  ---
  
  