0

ある段階で Chrome が新しいバージョンに更新され、jQuery コードの一部が機能しなくなったことに気付きました... (jQuery バージョン 1.7 - wordpress にバンドルされています)

これは、スライド ショーで画像を配置 (センタリング) し、前/次のボタンを配置するための基本的なコードです。それは FF で動作します (IE については知りません - 私はそれをできるだけ見ません)。ボックスの高さから画像の高さを引いた計算を行う代わりに、クロムで現在行っていることは、ボックスの高さを単純に2で割ることです。したがって、高さが 4x のボックスで高さが 2x の FF の画像では正しい「top: 1x」が返されますが、Chrome では「top:2x」が返されます。

奇妙なことに、#next および #prev div が正しく配置されます...

h = j$('.slide').height();
w = j$('.slide').width();
nph = j$('#next').height();
j$('.slide').each(function(){
   thisImg= j$(this).find('img');
   var imgH = thisImg.height();
   var imgW = thisImg.width();
   thisImg.css({'position':'absolute',
               'top':(h-imgH)/2,
               'left':(w-imgW)/2
   } );
}) ;
j$('#next, #prev').css('top',(h-nph)/2);

};

何かを正しく行っていないか、Chrome で何かが変更されました (更新以降、別のサイトで完全なアニメーションが失われました)。私に過失がない場合、Chrome にはどのようなハックがありますか?

EDITさらに調査すると、柔軟な（パーセンテージベースの）環境で画像を使用しようとしているからだと思います。これは、画像と div が次のようにスタイル設定されていることを意味します。

div {height:100%;width:100%;}
img {max-height:100%;max-width:100%}

Firefox は計算できるようですが、Chrome はできません。「次」および「前」の div には既知の寸法があります (そして正しく配置されます) 画像が読み込まれるときに画像を「キャッチ」し、max-height と max-width が適用される前にその寸法を調べる方法はありますか?

さらに更新 「max-height」または「max-width」のスタイルが設定されている場合、Chromeはページ上の画像の高さの値を返すことができないことを確認しました。「outerHeight/Width」メソッドも機能しません。

4

1 に答える 1

0

ニック、回避策は、画像のアスペクト比を維持できるという利点を追加して、CSS ではなく JavaScript で制限max-heightを適用することだと思います。max-widthCSS は高さと幅の制​​限を個別に適用するため、この機能はありません。

制限の適用は、「左」オフセットと「上」オフセットを適用する同じループで実行できます。

これを試して：

j$(function() {
    j$(".slide img").each(function(i, img) {
        var $img = j$(img),
            $wrapper = $img.closest(".slide"),//assuming '.slide' is the constraining wrapper
            w = $wrapper.width(),
            h = $wrapper.height(),
            _w = $img.width(),
            _h = $img.height(),
            scale = Math.min(1, w/_w, h/_h);//scale down if necessary, never scale up, preserving aspect ratio
        _w *= scale;
        _h *= scale;
        $img.width(_w).height(_h).css({
            'position': 'absolute',
            'left': ( w - _w ) / 2,
            'top': ( h - _h ) / 2
        });
    });
    var nph = j$('#next').height();
    j$('#next, #prev').css('top', (h-nph)/2);
});

コメントに示されているように、それ.slideが制約ラッパーであると想定する必要がありました。そうでない場合は、ステートメントのセレクターを調整し$wrapper = $img.closest(".slide")ます。

心配しないでくださいMath.min()、それは間違いではありません。最小値を取って、最大値を適用します。

于 2012-08-10T04:32:46.083 に答える