EUREKA... I think!

use this in your
includes/templates/YOUR/TEMPLATE/templates/tpl_modules_main_product_image.php

works perfect on my site even and tested also with images of different sizes too.

PHP Code:
<?php
/**
 * Module Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2011 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_main_product_image.php 18698 2011-05-04 14:50:06Z wilt $
 */
?>
<?php 
require(DIR_WS_MODULES zen_get_module_directory(FILENAME_MAIN_PRODUCT_IMAGE)); ?>
<div id="productMainImage" class="centeredContent back">

<style>
.mainImage {
  max-width: <?php echo MEDIUM_IMAGE_WIDTH ?>px;
  max-height: <?php echo MEDIUM_IMAGE_HEIGHT ?>px;
  height:auto;
  width:auto;
}
</style>


<script language="javascript" type="text/javascript"><!--
document.write('<?php echo '<a href="' $products_image_large '" class="bonzer_zoom" rel="product_info">' zen_image(addslashes($products_image_medium), addslashes($products_name), MEDIUM_IMAGE_WIDTHMEDIUM_IMAGE_HEIGHT'class="mainImage"') . '</a>'?>');
//--></script>



<noscript>
<?php
  
echo '<a href="' zen_href_link(FILENAME_POPUP_IMAGE'pID=' $_GET['products_id']) . '" target="_blank">' zen_image($products_image_medium$products_nameMEDIUM_IMAGE_WIDTHMEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' TEXT_CLICK_TO_ENLARGE '</span></a>';
?>
</noscript>
</div>
enjoy..