Change image size on click of button in jQuery
<p>I am working on image upload and I need to add functionality for image shapes. </p>

<p>There are buttons for landscape, portrait, square and panoramic. When the user clicks any of these, the div shape will change accordingly. </p>

<p>This is the code for the square shape but when I click on the square shape, it stretches the image. I want to change the shape of the div without stretching the image.</p>

<pre><code>$('#Square').on('click', function(){
    var images = $("#uploadedImage");
    for(i=0; i&lt;images.length; i++)
        images[i].onload = centerImage(images[i]);

    function centerImage(img) {
        if (img.width &gt; img.height ) {
            var y = 160;
            var x = img.width/img.height*y;
            var marx = (x-y)/2;
            img.style.height = y+"px";
            img.style.marginLeft = -(marx) + "px";
        }
    }
});
</code></pre>
