1

我正在使用jQuery调整图像大小。这次我只是调整它的大小,但我也想根据比例调整它的大小。选中复选框后,将根据比例调整大小。

这是我为keyup事件中的简单图像调整大小编写的代码。

<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 回答