0

このコード：

$('#ad img').each(function(){
    if($(this).width() > 125){
        $(this).height('auto');
        $(this).width(125);
    }
});

Firefoxでは正しく動作していますが、Chromeでは動作していません。内側のimgタグ#adはでくびれてheightいますが、幅が広すぎる場合は幅を抑える必要があります。すべてのブラウザで機能する、これを行うためのより良い方法はありますか？

画像のHTMLは次のとおりです。

<img src='http://easyuniv.com/img/ads/".$ad['img']."' height='40px'>
4

4 に答える 4

3

javascriptなしでこれを達成することができます。これをcssで使用します：

#ad img {
    width: 125px;
    height: auto;
    overflow: hidden;
}
于 2012-11-16T04:13:26.673 に答える
2

私はあなたを噛んでいるのは画像の負荷の変動性だと思います。コードの実行時までに画像自体が読み込まれていない場合、幅は0になります。画像のサイズが適切であることを確認するために、既存のコードを実行するだけでなく、読み込みハンドラーを使用してみてください。注：ロードハンドラーが追加される前にイメージがロードされる場合を処理するには、既存のコードを使用する必要があります。

$(function() {
    $('#ad img').on('load', function() {
          resize(this);
    }).each( function() {
          resize(this);
    });

    function resize(image) {
       var $image = $(image);
       if ($image.width() > 125) {
           $image.css( { height: 'auto', width: 125 } );
       }
    }
});
于 2012-11-16T04:34:28.427 に答える
1

試す：

$(window).load(function () {
    $('#ad img').each(function(){
        if($(this).width() > 125){
            $(this).height('auto');
            $(this).width(125);
        }
    });
});
于 2012-11-16T04:49:32.040 に答える
0

試しましたか：

        $('#ad img').each(function(){
        if($(this).width() > 125) {
            $(this).css('height', 'auto');
            $(this).css('width',125);
        }
    })
于 2012-11-16T04:15:24.250 に答える