0

ウィンドウのサイズが変更されたときに、div 内のいくつかの画像のサイズを変更するコードを作成しています。コードを読めばわかると思います：

$('img').each( function() {
    var image = $(this);
    var imagewidth = $(this).width();
    $.event.add(window, 'load', resizeFrame);
    $.event.add(window, 'resize', resizeFrame);

    function resizeFrame() {

        var windowWidth = $(window).width();
        var ratio = (980/windowWidth)*100;

        if ( windowWidth <= 980 ) {
            image.width( ratio*imagewidth + '%');
        }
    }
});

コードが機能せず、ログにオブジェクトが表示され、値がありません。

コードは何とか機能します。問題は、元のサイズのパーセントではなく、ウィンドウの幅に従って画像のサイズを変更することです。

4

1 に答える 1

3

このコードには複数の問題があります。最初に、サイズ変更イベントに N サイズ変更ハンドラーを追加します。そして、あなたは each 関数を正しく使用していません

クリーンアップコードは次のとおりです。

$(window).resize(function(evt) {
        var windowWidth = $(window).width();
        var ratio = (windowWidth/980) * 100;
        $('img').each( function(i, obj) {
            var imagewidth = $(obj).width();
            if ( windowWidth <= 980 ) {
                $(obj).attr('width', ratio + '%');
            } else {
                $(obj).attr('width', '100%');
            }
        });
    });

html:

<div style="width: 200px;">
                <img src="image.png">
            </div>

この関数を機能させるには、画像の周りの div で画像の最大幅を決定する必要があります。それ以外の場合は、画像の元の幅を保存して再スケーリングする必要があります

于 2013-01-22T19:58:56.060 に答える