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

Question

我正在使用css缩放图像如何缩放后不是缩放原始宽度和高度,而是缩放后的宽度和高度.我想用jquery来做这个,以便更多地理解这是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.它不是第三方.