Question

我正在使用 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');
        })

    });

正如我所看到的，当选择比例时，如果我改变宽度，那么高度会自动改变。这是怎么发生的，它会在哪个基础上发生变化。

请给我任何解决方案。

Answer 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中定义的内容）。

图像调整比例计算

1 个答案: