1

jQueryを使用して画像のサイズを変更しています。今回は単純にリサイズですが、プロポーションも合わせてリサイズしたいと思います。チェックボックスがチェックされている場合、比率に基づいてサイズ変更が行われます。

これは、キーアップイベントでの単純な画像サイズ変更用に書いた私のコードです。

<img id="image" src="#" alt="your_image" />
<label>Resize</label>
<input type="text" size="4" name="resize_width"  id="resize_width" />
<input type="text" size="4" name="resize_height" id="resize_height" />
<label>Use Proportion</label>
<input type="checkbox" id="resize_prop" />



jQuery('#resize_width,#resize_height').keyup(function(){
        var resize_width_val = jQuery('#resize_width').val();       
        var resize_height_val = jQuery('#resize_height').val();
        src_test = jQuery('#image').attr('src');

        if(jQuery('#resize_prop').attr("checked")=="checked"){

        }

        jQuery('<img id="image" alt="your_image" src="'+ src_test +'">').load(function() {

        jQuery('#image').remove(); jQuery(this).width(resize_width_val).height(resize_height_val).appendTo('#image_div').css('display','block');
        })

    });

比率が選択されているときに見たように、幅を変更すると高さが自動的に変更されます。それがどのように起こったのか、どのような根拠で変化したのか。

解決策を教えてください。

4

1 に答える 1

1

jQuery とは何の関係もありません<img/>。

デフォルトでは次のようになっています。

img {
    width: auto;
    height: auto;
}

幅のみを変更すると、縦横比を維持するために高さが変更されます (逆も同様です)。ただし、両方を変更すると、縦横比は維持されません。

例：

http://jsfiddle.net/coma/Fzvsa/6/

HTML

<div>
    <label><input type="radio" name="mode" value="none" checked="checked"/> None</label>
    <label><input type="radio" name="mode" value="width"/> Only width</label>
    <label><input type="radio" name="mode" value="height"/> Only heigh</label>
    <label><input type="radio" name="mode" value="both"/> Both</label>
</div>
<p>
    <img id="image" src="http://www.shawnkinley.com/wp-content/uploads/have-a-nice-day.jpg"/>
</p>

JS

$(function() {

    var auto = 'auto';
    var x = '50px';
    var image = $('#image');

    $('[name=mode]').change(function(event) {

        switch(this.value) {

            case 'none':
                image.css({
                    width: auto,
                    height: auto
                });
                break;

            case 'width':
                image.css({
                    width: x,
                    height: auto
                });
                break;

            case 'height':
                image.css({
                    width: auto,
                    height: x
                });
                break;

            case 'both':
                image.css({
                    width: x,
                    height: x
                });
                break;

        }

    });


});

これを見てください：

http://jsfiddle.net/coma/MbWaj/8/

$(function() {

    var width = $('#foo [name=width]');
    var height = $('#foo [name=height]');
    var proportion = $('#foo [name=proportion]');
    var image = $('#image');
    var keep = proportion.is(':checked');

    var update = function() {

        width.val(image.width());
        height.val(image.height());

    };

    $('#foo input').on('change input', function(event) {

        keep = proportion.is(':checked');
        image.removeAttr('style');

        if(keep) {

            if(this === height.get(0)) {

                image.height(this.value);
                width.val(image.width());

            } else {

                image.width(this.value);
                height.val(image.height());

            }

        } else {

            image.css({
                width: width.val(),
                height: height.val()
            });

        }


    });

    image.load(update);

    update();

});

style 属性を削除すると、要素は再びデフォルト (または CSS で定義されたもの) を取得します。

于 2013-05-17T09:03:27.120 に答える