mootools Fx.scroll with centered images

im not a mootools prof, so i think for one with more experience the solution for my little problem is quite smiple.

I have a simple Image galery with a square Image for "big" Imagepreview. It uses 5 images. The image id to set, comes from a carousel. In the moment it looks (in short) like this:

<script type="text/javascript">
function slide(pic_thumb) {
// Galerie Slides
        var pic = pic_thumb;
        myFx = new Fx.Scroll('gallery');
        myFx.toElement('medium_slice_image_'+(pic));
}

    <div id="gallery" style="overflow:hidden;position:relative;z-index:2;">
            <table cellpadding="0" cellspacing="0">
                <tr>
                        <td style="vertical-align:middle; text-align: center;">
                            <a id="link_0" href=""><img id="medium_slice_image_0" src=""></a>
                        </td>
                        <td style="vertical-align:middle; text-align: center;">
                            <a id="link_1" href=""><img id="medium_slice_image_1" src=""></a>
                        </td>
                </tr>
            </table>
        </div>

        .....

        <div id='thumb_{$counter}' style="width:81px;height:48px;float:left;margin-top:1px;margin-left:7px;" onclick="slide({$counter})">

Till now i used for the Big image to preview also sqaured images, but i would like to prefer using the orignal images for the preview keeping the 开发者_StackOverfloworiginal aspect ratio so that a wide image will be e.g. vertically centered.

My problem is, that the fx.scroll uses the image size as point to scroll. so that two smaller images (150x150 px) would be both shown directly together in the preview window (300x300 px).

I have no idea how i can solve this so that each images uses the fully 300x300 px size to scroll, even it is smaller and centered.

Please help me. Thank you