获取缩放后图像的宽度和高度

我正在使用CSS缩放图像，如何在缩放后获得其高度和宽度，而不是原始宽度和高度，而是缩放后的宽度和高度。我想使用 jquery 来做到这一点，以便更好地理解这是jsfiddle http://jsfiddle.net/axtruo/Ma5D2/

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

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

这对我来说实际上是一个非常有趣的问题，我学到了很多东西。

在 SO 和其他网站上阅读此处，CSS 转换显示在屏幕上，但它不在 DOM 中（如 :before、:after）。所以你必须使用一个名为 .getBoundingClientRect() 的偷偷摸摸的 JavaScript 命令 - 它会读取尺寸。

这里有一个FIDDLE http://jsfiddle.net/H5n4V/举个例子。

这是 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 -参考 http://javascript.info/tutorial/coordinates。这不是第三方的。