I'm adding photos to my products but they don't fit the photo holder so I get some ugly white spaceenter image description here

As you can see I got white spaces at the top and the bottom. How can i prevent this?

My configuration setting are: Base Image Width 1800, Small Image Width 210

3 Answers 3


The border being added is because of the settings of the media gallery in Magento's configuration*.

Magento adds the white space to preserve the image aspect ratio.


In the default Magento "RWD" theme this size is respected from the setting in the config in System > Config > Catalog > Product Image:

enter image description here

This "maximum width" setting tells Magento that all images above this value, resize them to this value. For all images below this value, leave them as-is.

Your actual resizing duties in your theme can be handled with CSS.

Special cases

The thumbnails below the main gallery image are sized differently, however. They are sized within the template.

$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75);

* This can be turned off with the keepFrame method of Mage_Catalog_Helper_Image


philwinkle has already specified the reason of white space. I still would like to give you resizing option in magento.

   echo '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->keepAspectRatio(true)->keepFrame(true)->resize(1035, 692).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'"/>';

Here I am resizing the image to 1035 × 692. Obviously you can change these numbers.

This is not complete answer as you have asked but should give you some idea of how does it work in Magento.


Found a great source for beginner like me:http://www.magthemes.com/magento-blog/customize-magentos-image-resize-functionality/

Need to remove the white border around your images? Don't want everything to be square? Here is how to customize the ->resize functionality in Magento.Here is what the default image resize code looks like:

<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(350) ?>

The problem is this will always give you a 350 x 350 pixel square. If your image is rectangular, you will get a white frame around it to make it square. The resize() command can be quickly and easily customized to work better with rectangular images.

->constrainOnly(true) This will not resize an image that is smaller than the dimensions inside the resize() part.

->keepAspectRatio(true) This will not distort the height/width of the image.

->keepFrame(false) This will not put a white frame around your image.

Here is what your image code would look like with all these set:

<?php echo $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)->resize(350, null) ?>

This would resize your images to a max 350 width and constrain the height. If your image is taller than it is wide, you will end up with a nicely resized vertical image.

Here are the various places that images are used:

/app/design/frontend/default/yourtheme/catalog/product/view/media.phtml (displays the image on your product view page) /app/design/frontend/default/yourtheme/catalog/product/list.phtml (displays the image on category view)

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.