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

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


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.

  • To display them in a rectangular div with white background is no option?
    – carlcs
    Nov 5 '14 at 10:14
  • @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
    Nov 5 '14 at 10:16
  • You could use js to take care of the aspect ratio.
    – carlcs
    Nov 5 '14 at 10:20
  • 1
    It's even possible with css only! Just found a nice solution on StackOverflow: "Responsively change div size keeping aspect ratio"!
    – carlcs
    Nov 5 '14 at 10:24
  • 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
    Nov 5 '14 at 15:14

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

  • Thanks Bryan, looks like another case of me trying to do the impossible!
    – Jamie Wade
    Nov 5 '14 at 15:26

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




Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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