mootools Fx.scroll 带有居中图像

Question

我不是 mootools 教授，所以我认为对于一个有更多经验的人来说，我的小问题的解决方案非常简单。

我有一个简单的图像库，其中有一个用于“大”图像预览的方形图像。它使用 5 个图像。要设置的图像 ID 来自轮播。目前它看起来（简而言之）是这样的：

<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})">

到目前为止，我使用大图像来预览方形图像，但我更喜欢使用原始图像进行预览，保持原始纵横比，以便宽图像将垂直居中。

我的问题是， fx.scroll 使用图像大小作为滚动点。这样两个较小的图像（150x150 像素）将直接一起显示在预览窗口（300x300 像素）中。

我不知道如何解决这个问题，以便每个图像都使用完整的 300x300 像素大小来滚动，即使它更小且居中。

请帮我。谢谢