Image Resize Proportion Calculations

Question

I am resizing image using jQuery. This time I am simply resizing it but I want to resize it on the basis of Proportion also. When Checkbox is checked then resizing is done on the basis of proportion.

Here is my code which I wrote for simple Image Resize on keyup event.

<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');
        })

    });

As I have seen when proportion is selected and if I change width then height automatically changes. How is that happened and on which basis it changes.

Please give me any solution.

Answer 1

It has nothing to do with jQuery, is just the way that <img/> works.

Since it has by default:

img {
    width: auto;
    height: auto;
}

if you only change the width, then the height will change to keep the aspect ratio (and the other way too), but if you change both, then it won't preserve it.

An example:

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;

        }

    });


});

Take a look at this:

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();

});

If you remove the style attribute, then the element will get the defaults again (or what was defined in your CSS).