Main_product_image proportional to page width

[dw08gm]

I want to make my main_product_image proportional to the page width of the user.

My current page setup is set at max-width = 1200px, with left and right column widths = 20%, and the centre column divided equally into two columns, productBox = 49% width and productDetailsBox = 49% width.

The basic div structure is as follows:

<div id="mainProductBox=100%">
<div id="productBox=49%">
<div id="imageBox=90%">
<main_product_image>
</div id="imageBox">
</div id="productBox">
<div id="productDetailsBox=49%">
<product details>
</div id="productDetailsBox">
</div id="mainProductBox">

What I want is for main_product_image to always fit within the width of imageBox.

Part of the problem is that the dimensions of main_product_image are prescribed in Admin > Configurration > Images, as in Product Info - Image Width and Product Info - Image Height, but where setting fixed px dimensions for the medium image invariably causes the image to extend beyond productBox=49% and thus overlap productDetailsBox=49% when viewed on screens of smaller width.

I have also tried setting Product Info - Image Width and Product Info - Image Height to 100%, which results only in a small image being shown, and to null or blank, which results in the medium image being shown but without any proportioning. Other variations I have tried have resulted in a blank white centre column.

Furthermore, in tpl_product_info_display.php, the width and height dimensions of main_product_image are called from tpl_modules_main_product_image.php,

echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>';

where to make main_product_image proportional may also require replacement code for zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT).

In html websites, I have successfully achieved proportional dimensioning by the following:

<div class="c1">
<div class="c2">
<div class="c3">
<img class="c4"/>
</div class="c3">
</div class="c2">
</div class="c1">

where

div.c1 {width: 100%; height: auto;}
div.c2 {width: 49%; float: left; text-align: center;}
div.c3 {width: 90%; margin: 0 auto;}
img.c4 {width: 100%; border: 0px solid;}

However I fail to see how to incorporate <img class="c4"/> into the existing code.

Help greatly appreciated. Thanks in advance