jquery - 缩放后获取图像的宽高

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 .它不是第三方。