크기 조정 후 이미지의 너비와 높이를 가져옵니다.

Question

CSS를 사용하여 이미지 크기를 조절하는 방법 원래의 너비와 높이가 아닌 배율 조정 후 배율과 너비를 가져올 수 있습니다. 내가 더 이해를 사용하여이 jQuery를 수행 할이이 acutally 나에게 매우 흥미로운 질문입니다 jsfiddle

$("#b1").click(function(){ 
     $('#dragable').css('transform','scale(2.12)'); 
}); 

$('#b2').click(function(){ 
    $obj = $('#dragable'); 
    alert($obj.width() + " " + $obj.height()); 
}); 

Answer 1

이며, 나는 꽤 배웠다.

SO 및 다른 사이트에서 여기를 읽으면 CSS 변환이 화면에 표시되지만 DOM에 없습니다 (예 : before, : after). 그래서 당신은 .getBoundingClientRect()라는 비열한 javascript 명령을 사용해야 만합니다. 그리고 치수를 읽을 것입니다.

예를 들어 FIDDLE입니다.

여기 JS가 있습니다.

JS

$('.beforeclick').append('height: ' + $('#b1').height() + ' width: ' + $('#b1').width()); 
$("#b1").click(function(){ 
     $('#b1').css('transform','scale(0.5)'); 
     var mywidth = $("#b1")[0].getBoundingClientRect().width; 
     var myheight = $("#b1")[0].getBoundingClientRect().height; 
     $('.afterclick').append('height: ' + myheight + ' width: ' + mywidth); 
}); 

PS - .getBoundingClientRect()는 대부분의 브라우저에서 지원되는 기본 JS 인 - REFERENCE. 타사가 아닙니다.