php - jquery在单击按钮时更改div形状

Question

我正在将用户上传的图像显示到 div 中。div的方形，横向，纵向和全景形状有四个按钮。用户可以根据 div 形状图像自动更改 div 的形状。但我没有找到任何 jquery 或任何与形状相关的东西。我希望当用户单击方形按钮时，div 形状会根据此更改，对于横向、纵向、全景也是如此。我不知道如何开始。请帮忙。这是代码，我附上了截图。在这个我的图像没有根据高度和宽度切割，当我点击正方形时，它在中心位置左对齐。请看截图。$("#square").click(函数(){

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


}); 

Answer 1

height width根据您的要求设置

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

Answer 2

您需要使用css方法来更改 div 的尺寸。例如：

var dim;

switch ($(this).data('type')) {
    case 'square':
        dim = {height: 400, width: 400};
        break;

    case 'landscape':
        dim = {height: 300, width: 400};
        break;

    case 'portrait':
        dim = {height: 400, width: 300};
        break;
}

http://jsfiddle.net/z46Tt/2/

Answer 3

onclick 使用 Jquery CSS

并更改图像 Div 的 CSS 属性。把它做成正方形或者你想做的任何东西