0

グリッドタイプのフォーマット内で画像の中央を動的に整列させようとしています。各画像は、の最大高さと最大幅を使用してCDNから動的に読み込まれ.thumbnail imgます。コンテナdivは固定の幅と高さです。

#storeItems .thumbnail {
border:1px solid #637678;
width:136px;
height:151px;
padding:1px;
position:relative;
margin:0 auto;
display:block;
overflow:hidden;
}
#storeItems .thumbnail img {
max-width:130px;
max-height:130px;
display:block;
position:relative;
}

私が作成したJavaScriptは、IE8 +、Chrome、Opera、Safari、Firefox内で画像を正しく配置します。ただし、IE8 +、Opera、Firefoxで問題が発生するのは、最初にページを読み込んだときに、ページを更新するまで整列しません。ページがキャッシュされると、配置が正常に保たれます。これは、キャッシュされたページがない最初のページのロード後にのみ発生するようです。

(function($) {
$("#storeItems .thumbnail").each(function(i){
    var img = $(this).find('img');

    var y = $(this).height(),
        x = $(this).width();
    /**
     * WebKit browsers which incorrectly calculates margin
     */
    if($.browser.webkit) {
        $(this).css({
            'display': 'table-cell',
            'vertical-align': 'middle',
            'text-align': 'center'
        });
        img.css({
            'margin': 'auto auto'
        });
    }
    else {
        img.css({
            'margin-top': ((y-img.height())/2)+'px',
            'margin-left': ((x-img.width())/2)+'px'
        });
    }
});
})(jQuery);

ページの下部にJavaScriptを読み込んでいます。ヘッダーに読み込んでみました。$(document).ready();ヘッダーと下部の両方でも使用しました。それを試した後、それはまったく整列しませんでした。足りないものはありますか？これらのブラウザでは、最初の実行時に計算が行われないようです。何かご意見は？

4

1 に答える 1

1

これを行う：

(function($) {
    $(document).ready(function() {
        $("#storeItems .thumbnail").each(function(i){
            var img = $(this).find('img');

            var y = $(this).height(),
                x = $(this).width();
            /**
             * WebKit browsers which incorrectly calculates margin
             */
            if($.browser.webkit) {
                $(this).css({
                    'display': 'table-cell',
                    'vertical-align': 'middle',
                    'text-align': 'center'
                });
                img.css({
                    'margin': 'auto auto'
                });
            }
            else {
                img.css({
                    'margin-top': ((y-img.height())/2)+'px',
                    'margin-left': ((x-img.width())/2)+'px'
                });
            }
        });
    });
})(jQuery);
于 2012-11-06T15:56:44.630 に答える