Configurable swatches - keep correct image proportions

Question

The images created for the configurable swatches are stretched to fit the square div and image proportions are ignored. Images that are rectangle shaped will end up being distorted.

This is what the image should look like (taken from the thumbs view in magento 1.8.1.0):

This is what it looks like for the actual swatch:

[Moderator edit: adding relevant comment to body]

There is a template located at catalog\product\view\type\options\configurable\swatches.phtml and the code responsible for the swatch images is as follows:

 <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />

Changing this will have no effect on the image proportions however.

Answer 1

We ran into this and perhaps someone has a better solution, but we extended the configurable swatches productimage.php helper with our own module. Perhaps Magento intended everyone to create manual swatches for every product. That tis time consuming and we have products that does not work well for. They uses the Varien Image model which allowed them access to caching, but does not have the convenient default settings of the MAGE catalog/image model. The nice part is those functions are available.

If you don't know how to create a module would suggest making square images. "Do Not Edit The Core Files" Extend Them!

We extended the

protected function _resizeSwatchImage($filename, $tag, $width, $height)
{

below

$processor = new Varien_Image($sourceFilePath);

we added

$processor->backgroundColor(array(255, 255, 255)); 
// Set background color to white
$processor->constrainOnly(TRUE); 
//Constrain to proportions
$processor->keepAspectRatio(TRUE); 
//keep existing aspect ratio
$processor->keepFrame(TRUE);
//Kinda what it says

Answer 2

Swatches are designed to have a standard width and height among all Swatches in Magento, unfortunately.

Without overriding the way Magento works, your best bet would be to either make your swatch images the same aspect ratio that Magento expects (by default a square) or to change the default swatch dimensions (if you have a set ratio you plan to use throughout your store).

The swatch width and height are set in the Configurable Swatches section of the Catalog configuration. Specifically, you'll find three sections: Swatch Dimensions on Product Detail Page, Swatch Dimensions in Product Listing, and Swatch Dimensions in Layered Navigation.

Magento automatically resizes the images to fit these dimensions before rendering them onto the page.