버튼 클릭시 jquery div 모양 변경

Question

div에 사용자가 업로드 한 이미지가 표시됩니다. 가로, 세로, 세로 및 파노라마 모양의 div 버튼이 4 개 있습니다. 사용자는 div의 모양을 변경하고 div 모양 이미지에 따라 자동으로 설정할 수 있습니다. 하지만 jquery 또는 셰이프와 관련된 내용을 찾지 못했습니다. 나는 이것에 따라 사용자가 정사각형 버튼을 클릭 할 때마다 모양, 풍경, 세로, 파노라마를 변경하고자한다. 나는 이것을 어떻게 시작해야할지 모른다. 도와주세요. 이것은 코드이며 스크린 샷을 첨부했습니다. 이것은 내 이미지가 높이와 너비에 따라 자르지 않고 정사각형을 클릭하면 가운데 대신 왼쪽 정렬됩니다. 스크린 샷을 참조하십시오. $ ("# 광장"). 클릭 (함수() {

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


}); 

Answer 1

는 온 클릭 Jquery CSS

를 사용하여 이미지 사업부의 CSS 속성을 변경 귀하의 요구 사항

$(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

을 따라 height width 설정 . 정사각형 또는 원하는대로 만들 수 있습니다.

Answer 3

크기를 변경하려면 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/