jquery点击按钮改变div形状

Question

i am showing user uploaded image into a div. there are four buttons for square, landscape, portrait and panoramic shape of div. user can change shape of div and according to div shape image set automatically. but i did not found any jquery or anything related to shapes. i want when user will click on square button div shape change according to this and same for landscape, portrait, panoramic. i have no idea how to start this. Please help. this is code and i have attached a screenshot. in this my image is not cutting according to height and width and it aligned left in place of center when i click on square.Please see the screenshot. $("#square").click(function(){

$(".resize-div").animate({width: 341,height: 341});


}); 

Answer 1

set height width according to your requirement

$(document).ready(function() {

    $("#btnSquare").click(function(){
        $("#div").width(100).height(100);
    }); 

 $("#btnlandscape").click(function(){
        $("#div").width(300).height(400);
    }); 

 $("#btnportrait").click(function(){
        $("#div").width(400).height(300);
    }); 

 $("#btnpanoramic").click(function(){
        $("#div").width(100).height(100);
    }); 
});