get width and height of image after scaling

Question

i am scaling an image using css how can i get its height and width after scaling not the original width and height but width and height after scaling. i want to do this using jquery for more understanding this is the jsfiddle

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

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

Answer 1

This is acutally a very interesting question for me, and I've learned quite a bit.

Reading around here on SO and other sites, a CSS transformation is shown on your screen, but it is not in the DOM (like :before, :after). So you have to use a sneaky javascript command called .getBoundingClientRect() - and it will read the dimensions.

Here is a FIDDLE with an example.

And here is the 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() is native JS supported by most browsers - REFERENCE. It's not third-party.