html - 画像が中央に配置されたmootools Fx.scroll

Question

私はムーツールの専門家ではないので、経験が豊富な人にとっては、私の小さな問題の解決策は非常に簡単だと思います。

「大きな」Imagepreview用の正方形の画像を持つ単純な画像ギャラリーがあります。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 が画像サイズをスクロールするポイントとして使用することです。2 つの小さな画像 (150x150 ピクセル) がプレビュー ウィンドウ (300x300 ピクセル) に直接一緒に表示されるようにします。

これを解決して、各画像が300x300ピクセルのサイズを完全に使用してスクロールできるようにする方法がわかりません。

私を助けてください。ありがとうございました