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
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:
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.
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
philwinkle has already specified the reason of white space. I still would like to give you resizing option in magento.
<?php 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)